rxjs ajax query,rxjs入门之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);

//...

原文：https://www.cnblogs.com/honkerzh/p/10832492.html