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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
Vue实现跑马灯效果
May 25 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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版)
2006/10/09 PHP
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python 多线程串行和并行的实例
2019/02/22 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
大专学生求职自荐信
2014/07/06 职场文书
学习十八大的心得体会
2014/09/12 职场文书
离职证明标准格式
2014/09/15 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书