rxjs入門3之項目中ajax函數封裝

項目中ajax函數封裝

⽹頁應⽤主要數據源有兩個：⼀個是⽹頁中的DOM事件，另⼀個就是通過AJAX獲得的服務器資源。我們已經知道fromEvent這個操作符可以根據DOM事件產⽣Observable對象，相應的，RxJS還提供了另⼀個名為ajax的操作符，根據AJAX請求的返回結果產⽣Observable對象，當處理復雜的邏輯時，通過操作符組合實現數據流處理才能彰顯威⼒，現在接觸的還是創建類操作符，當接觸到其他類型的操作符之后，會看到ajax的巧妙⽤法。
注釋：下代碼為react項目中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({
          data:data,
          loading:false,  //數據加載效果結束
        })},
        error:(err)=>{
          message.error(errorData(err));
            this.setState({
                loading:false,  //數據加載效果結束
            })
        },
        complete:()=>{
          console.log('complete')
        }
      });
    };
    fetchData.call(this);
//...