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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JavaScript运行原理分析
Feb 09 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php compact 通过变量创建数组
2016/11/15 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python解析最简单的验证码
2016/01/07 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
Python更新所有已安装包的操作
2020/02/13 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
最新创业融资计划书
2014/01/19 职场文书
教学器材管理制度
2014/01/26 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
初级党校心得体会
2014/09/11 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python