首页 > 文章 > web前端 > react中的ajax封装详细介绍

react中的ajax封装详细介绍

小云云原创: 2018-01-15 14:08:211762浏览

本文主要介绍了react中的ajax封装实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下，希望能帮助到大家。

react中的ajax封装实例详解

代码块

**opts: {&#39;可选参数&#39;}
**method: 请求方式:GET/POST,默认值:&#39;GET&#39;;
**url:  发送请求的地址, 默认值: 当前页地址;
**data: string,json;
**async: 是否异步:true/false,默认值:true;
**cache: 是否缓存：true/false,默认值:true;
**contentType: HTTP头信息，默认值：&#39;application/x-www-form-urlencoded&#39;;
**success: 请求成功后的回调函数;
**error: 请求失败后的回调函数;
*/
let configResText = function (responseText, resTextType){
 return resTextType == &#39;html&#39; ? responseText : JSON.parse(responseText);
};

let ajax = function (opts){
 //一.设置默认参数
 var defaults = {  
   method: &#39;GET&#39;,
     url: &#39;&#39;,
    data: &#39;&#39;,
    async: true,
    cache: false,
 contentType: &#39;application/x-www-form-urlencoded&#39;,
 resTextType: &#39;&#39;,
   success: function (){},
    error: function (){}
 };

 //二.用户参数覆盖默认参数  
 for(var key in opts){
  defaults[key] = opts[key];
 }

 //三.对数据进行处理
 if(typeof defaults.data === &#39;object&#39;){  //处理 data
  var str = &#39;&#39;;
  for(var key in defaults.data){
   var curDataStr = JSON.stringify(defaults.data[key]);
   if (curDataStr.charAt(0) == &#39;[&#39; && curDataStr.charAt(curDataStr.length-1) == &#39;]&#39;) {
    var arrQuery = JSON.parse(curDataStr).map(function (item){
     return key + &#39;[]=&#39; + item
    }).join(&#39;&&#39;);
    str += key + &#39;=&#39; + arrQuery + &#39;&&#39;;
   } else {
    str += key + &#39;=&#39; + defaults.data[key] + &#39;&&#39;;
   }
  }
  defaults.data = str.substring(0, str.length - 1);
 }

 defaults.method = defaults.method.toUpperCase();  //处理 method

 defaults.cache = defaults.cache ? &#39;&#39; : &#39;&&#39; + new Date().getTime() ;//处理 cache

 if( defaults.method === &#39;GET&#39; && (defaults.data || defaults.cache) ) {
  defaults.url += String(&#39;?&#39; + defaults.data + defaults.cache);  //处理 url
  if(defaults.cache){
   defaults.url = defaults.url.replace(/(\?[^\?]+)\?/gi, &#39;$1&#39;);
  }
 }

 //四.开始编写ajax
 //1.创建ajax对象
 var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
 //2.和服务器建立联系，告诉服务器你要取什么文件
 oXhr.open(defaults.method, defaults.url, defaults.async);
 //3.发送请求
 if(defaults.method === &#39;GET&#39;)
  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 &#39;../../commonJS/ajax.js&#39;;
ajax({
  url: &#39;&#39;,
  data: &#39;&#39;,
  success: function(t) {
      if (t) {
      let allpageNum = t.data;
        $this.setState({
         allPages:allpageNum
        });
      }
  }
});

react中的ajax封装详细介绍

相关文章