rxjs入門之ajax封裝
專案種ajax函式封裝
註釋：下程式碼為react專案中ajax進行基礎配置的封裝
⽹頁應⽤主要資料來源有兩個：⼀個是⽹頁中的DOM事件，另⼀個就是通過AJAX獲得的伺服器資源。我們已經知道fromEvent這個操作符可以根據DOM事件產⽣Observable物件，相應的，RxJS還提供了另⼀個名為ajax的操作符，根據AJAX請求的返回結果產⽣Observable物件，當處理複雜的邏輯時，通過操作符組合實現資料流處理才能彰顯威⼒，現在接觸的還是建立類操作符，當接觸到其他型別的操作符之後，會看到ajax的巧妙⽤法。
```
import { ajax} from 'rxjs/ajax';
function ajaxJson(type, url, data){
let localHost = window.location.host;
if (window.location.port) {
localHost = localHost.split(':')[0];
}
let URL = '//api.' + localHost + ':80/v1/'+url;
let config = {
url:URL,
method:type,
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
if(type ==='post'){
config['body'] = JSON.stringify(data);
}
else if(type === 'get'){
let ret = '?';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
ret=ret.substring(0,ret.length-1);
config.url +=ret;
}
return ajax(config);
}
export {
ajaxJson
}
### 專案種ajax函式的使用
import {ajaxJson} from '../../tools/ajax.js';
//...
let data= {
page:1,
pageSize:10,
search:''
};
//請求錯誤處理函式，可放在tools 檔案中
function errorData(err){
if(err.code ===404){
return '介面訪問錯誤，請聯絡相關開發人員。'
}
if(err.response ===null || err.response ==='' || err.response.length > 50){
return '網路錯誤。'
}
return err.response;
}
//請求前的啟動載入效果函式
async function asyncLoading(){
return new Promise((resolve,reject)=>{
that.setState({
loading:true //資料載入效果開啟
},()=>{resolve('1')})
})
}
async function fetchData(){
await asyncLoading();
await ajaxJson('get','source/combineSourceList',data).pipe(
retry(1), //重試
// catchError(err=>of({response:[]})), //修復
map(data=>data.response),
)
.subscribe({
next:(data)=>{this.setState({
,
loading:false, //資料載入效果結束
})},
error:(err)=>{
message.error(errorData(err));
this.setState({
loading:false, //資料載入效果結束
})
},
complete:()=>{
console.log('complete')
}
});
};
fetchData.call(this);
//...
```js