本文主要介绍了react中的ajax封装实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下，希望能帮助到大家。
react中的ajax封装实例详解
代码块
**opts: {'可选参数'}
**method: 请求方式:get/post,默认值:'get';
**url: 发送请求的地址, 默认值: 当前页地址;
**data: string,json;
**async: 是否异步:true/false,默认值:true;
**cache: 是否缓存：true/false,默认值:true;
**contenttype: http头信息，默认值：'application/x-www-form-urlencoded';
**success: 请求成功后的回调函数;
**error: 请求失败后的回调函数;
*/
let configrestext = function (responsetext, restexttype){
return restexttype == 'html' ? responsetext : json.parse(responsetext);
};
let ajax = function (opts){
//一.设置默认参数
var defaults = {
method: 'get',
url: '',
data: '',
async: true,
cache: false,
contenttype: 'application/x-www-form-urlencoded',
restexttype: '',
success: function (){},
error: function (){}
};
//二.用户参数覆盖默认参数
for(var key in opts){
defaults[key] = opts[key];
}
//三.对数据进行处理
if(typeof defaults.data === 'object'){ //处理 data
var str = '';
for(var key in defaults.data){
var curdatastr = json.stringify(defaults.data[key]);
if (curdatastr.charat(0) == '[' && curdatastr.charat(curdatastr.length-1) == ']') {
var arrquery = json.parse(curdatastr).map(function (item){
return key + '[]=' + item
}).join('&');
str += key + '=' + arrquery + '&';
} else {
str += key + '=' + defaults.data[key] + '&';
}
}
defaults.data = str.substring(0, str.length - 1);
}
defaults.method = defaults.method.touppercase(); //处理 method
defaults.cache = defaults.cache ? '' : '&' + new date().gettime() ;//处理 cache
if( defaults.method === 'get' && (defaults.data || defaults.cache) ) {
defaults.url += string('?' + defaults.data + defaults.cache); //处理 url
if(defaults.cache){
defaults.url = defaults.url.replace(/(\?[^\?]+)\?/gi, '$1');
}
}
//四.开始编写ajax
//1.创建ajax对象
var oxhr = window.xmlhttprequest ? new xmlhttprequest() : new activexobject('microsoft.xmlhttp');
//2.和服务器建立联系，告诉服务器你要取什么文件
oxhr.open(defaults.method, defaults.url, defaults.async);
//3.发送请求
if(defaults.method === 'get')
oxhr.send(null);
else{
oxhr.setrequestheader("content-type", defaults.contenttype);
oxhr.send(defaults.data);
}
//4.等待服务器回应
oxhr.onreadystatechange = function (){
if(oxhr.readystate === 4){
if(oxhr.status === 200)
defaults.success.call(oxhr, configrestext(oxhr.responsetext, defaults.restexttype));
else{
defaults.error();
}
}
};
};
export default ajax;
调用方法
import ajax from '../../commonjs/ajax.js';
ajax({
url: '',
data: '',
success: function(t) {
if (t) {
let allpagenum = t.data;
$this.setstate({
allpages:allpagenum
});
}
}
});
相关推荐：
js中ajax封装的实例详解
简单的ajax封装
自己实现ajax封装示例分享_javascript技巧
以上就是react中的ajax封装详细介绍的详细内容。