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 相关文章推荐
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue项目添加多页面配置的步骤详解
May 22 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
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python输出带颜色的字符串实例
2017/10/10 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
详解python中的index函数用法
2019/08/06 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
架构师岗位职责
2013/11/18 职场文书
国税会议欢迎词
2014/01/16 职场文书
环保倡议书300字
2014/05/15 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年教研工作总结
2015/05/23 职场文书
法律讲堂观后感
2015/06/11 职场文书
化工厂员工工作总结
2015/10/15 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js