欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react中的ajax封装实例详解

程序员文章站 2022-06-24 17:31:01
react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:get/post,默认值:'get'; **ur...

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
        });
      }
  }
});

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!