rxjs入門之ajax封裝

長安城下翩翩少年發表於2019-05-08
JS封裝

專案中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);
//...

相關文章