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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
JavaScript中DOM详解
Apr 13 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
JS变量提升及函数提升实例解析
Sep 03 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对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php和asp语法上的区别总结
2019/05/12 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
jquery replace方法去空格
2017/05/08 jQuery
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
详解微信UnionID作用
2019/05/15 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
javascript设计模式之迭代器模式
2020/01/30 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python WindowsError的错误代码详解
2017/07/23 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python的条件锁与事件共享详解
2019/09/12 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
趣味活动策划方案
2014/02/08 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
班级文化建设标语
2014/06/23 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP