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 }); } } });
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!