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:请求失败后的回调函数;
*/
letconfigResText=function(responseText,resTextType){
returnresTextType=='html'?responseText:JSON.parse(responseText);
};
letajax=function(opts){
//一.设置默认参数
vardefaults={
method:'GET',
url:'',
data:'',
async:true,
cache:false,
contentType:'application/x-www-form-urlencoded',
resTextType:'',
success:function(){},
error:function(){}
};
//二.用户参数覆盖默认参数
for(varkeyinopts){
defaults[key]=opts[key];
}
//三.对数据进行处理
if(typeofdefaults.data==='object'){//处理data
varstr='';
for(varkeyindefaults.data){
varcurDataStr=JSON.stringify(defaults.data[key]);
if(curDataStr.charAt(0)=='['&&curDataStr.charAt(curDataStr.length-1)==']'){
vararrQuery=JSON.parse(curDataStr).map(function(item){
returnkey+'[]='+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?'':'&'+newDate().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对象
varoXhr=window.XMLHttpRequest?newXMLHttpRequest():newActiveXObject('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();
}
}
};
};
exportdefaultajax;
调用方法
importajaxfrom'../../commonJS/ajax.js';
ajax({
url:'',
data:'',
success:function(t){
if(t){
letallpageNum=t.data;
$this.setState({
allPages:allpageNum
});
}
}
});
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！