react中的ajax封装实例详解


Posted in Javascript onOctober 17, 2017

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

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

Javascript 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
javascript实现获取字符串hash值
May 10 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 #Javascript
Vue中封装input组件的实例详解
Oct 17 #Javascript
js获取文件里面的所有文件名(实例)
Oct 17 #Javascript
Vue中之nextTick函数源码分析详解
Oct 17 #Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php标签云的实现代码
2012/10/10 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JavaScript Split()方法
2015/12/18 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python动态网页批量爬取
2016/02/14 Python
Python如何快速实现分布式任务
2017/07/06 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
学生安全教育材料
2014/02/14 职场文书
股份合作协议书范本
2014/04/14 职场文书
骨干教师培训方案
2014/05/06 职场文书
2014年德育工作总结
2014/11/20 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书