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){
  const localHost = window.location.host;
  if (window.location.port) {
    localHost = localHost.split(':')[0];
  }
  const URL = '//api.' + localHost + ':80/v1/'+url;
  const 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'){
    const 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';
//...
const 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);
//...