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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
js变量以及其作用域详解
Jul 18 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
vue导航栏部分的动态渲染实例
Nov 01 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Stop SQL Server
2007/06/21 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python实现三壶谜题的示例详解
2020/11/02 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
EJB的激活机制
2013/10/25 面试题
函授大学生自我鉴定
2014/02/05 职场文书
纠风工作实施方案
2014/03/15 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
医生见习报告范文
2014/11/03 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书