Vue Promise的axios请求封装详解


Posted in Javascript onAugust 13, 2018

现在应该大部分公司都是前后端分离了。so,数据请求的封装还是必须的。

为了实现向ios中block封装请求的异步的效果,我采用JavaScript中promise这个对象。

var p1 = New promise((resolve,reject)=>{
 var timeOut = Math.random() * 2;
  log('set timeout to: ' + timeOut + ' seconds.');
  setTimeout(function () {
    if (timeOut < 1) {
      log('call resolve()...');
      resolve('200 OK');
    }
    else {
      log('call reject()...');
      reject('timeout in ' + timeOut + ' seconds.');
    }
  }, timeOut * 1000);
})

其中resolve,reject就相当于是你定义了两个block,然后把数据传出去。

继续往下看,紧接着上面的代码

var p2 = p1.then(function (result) {  //resolve 导出的数据
  console.log('成功:' + result);
});
var p3 = p2.catch(function (reason) { //reject 导出的数据
  console.log('失败:' + reason);
});

通过查阅资料还发现另外两种用法,Promise.all 和 Promise.race这两种。

var p1 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2,并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
  console.log(results); // 获得一个Array: ['P1', 'P2']
});

这一种是p1 和 p2 都返回了数据,才会执行all后面的then函数。挺像ios中GCD的notify函数

第二种

var p1 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
  console.log(result); // 'P1'
});

race跑步的意思,看谁跑得快,跑得慢的就被摒弃掉了。

上面这些是封装的基础,下面来看具体应用#

基于axios的请求封装

//判断请求环境来区分链接 生产环境和测试环境
const ajaxUrl = env === 'development' ? 
  'https://www.baidu.com' :
  env === 'production' ?
  'https://www.baidu.com' :
  'https://www.baidu.com';

util.ajax = axios.create({
  baseURL: ajaxUrl,
  timeout: 30000
});
// options中包含着数据
export function axiosfetch(options) {
  
  return new Promise((resolve, reject) => {
    var token = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : "";
    var cid = window.localStorage.getItem('X-CID') ? window.localStorage.getItem('X-CID') : "";
    // var language = window.localStorage.getItem('language') ? window.localStorage.getItem('language') : "";
    
    var language = tools.getCookie('language')?tools.getCookie('language'): navigator.language;
    language = language == "en-US" ? "en" : language ;
    debug.log(language)
    var params = tools.deepClone(options.params);//深拷贝
    var sign_str = tools.sign(params); //签名
    const instance = axios.create({
      baseURL: ajaxUrl,
      timeout: 30000,
      //instance创建一个axios实例,可以自定义配置,可在 axios文档中查看详情
      //所有的请求都会带上这些配置,比如全局都要用的身份信息等。
      headers: { //所需的信息放到header头中
        // 'Content-Type': 'application/json',
        "Authorization": token,
        "X-CID":cid,
        "X-LOCALE":language,
        "X-SIGN":sign_str
      },
      // timeout: 30 * 1000 //30秒超时
    });
    
    let httpDefaultOpts = { //http默认配置
      method:options.method,
      url: options.url,
      timeout: 600000,
      params:Object.assign(params),
      data:qs.stringify(Object.assign(params)),
      // headers: options.method=='get'?{
      //   'X-Requested-With': 'XMLHttpRequest',
      //   "Accept": "application/json",
      //   "Content-Type": "application/json; charset=UTF-8",
      //   "Authorization": token
      // }:{
      //   'X-Requested-With': 'XMLHttpRequest',
      //   'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      //   "Authorization": token
      // }
    }

    if(options.method=='get'){ //判断是get请求还是post请求
      delete httpDefaultOpts.data
    }else{
      delete httpDefaultOpts.params
    }
    instance(httpDefaultOpts)
      .then(response => {//then 请求成功之后进行什么操作
        debug.log('参数:')
        debug.log(options.params)
        debug.log('响应:')
        debug.log(response)
        debug.log(response.data.errno)
        if(response.data.errno == 401){
          // alert(response.data.errmsg)
          // window.location.href = window.location.protocol + "//" +window.location.host + '/#/login'
          return
        }
        if(response.data.errno == 400){
          reject(response)
          return
        }
        resolve(response)//把请求到的数据发到引用请求的地方
      })
      .catch(error => {
        // console.log('请求异常信息=>:' + options.params + '\n' + '响应' + error)
        debug.log('请求异常信息=>:' + options.params + '\n' + '响应' + error)
        reject(error)
      })
  })
}

外面再包一层

export function getNodeDetailInfo(address) {
  return axiosfetch({
    url:api.nodeDetailAPI,//链接
    method:"get",//get请求
    params:{//数据
      address:address
    }
  })
}

再下面就是实际应用。

getNodeDetailInfo(address).then(res => {
          var data = res.data.data;
        }).catch(error => {
          console.log(error, '请求失败')
        })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
Angular6封装http请求的步骤详解
Aug 13 #Javascript
解决angularjs中同步执行http请求的方法
Aug 13 #Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 #Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 #Javascript
angularjs $http调用接口的方式详解
Aug 13 #Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 #Javascript
vue实现文件上传功能
Aug 13 #Javascript
You might like
PHP file_exists问题杂谈
2012/05/07 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
Json解析的方法小结
2016/06/22 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python按钮的响应事件详解
2019/03/04 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python向excel中写入数据的方法
2019/05/05 Python
python里 super类的工作原理详解
2019/06/19 Python
关于python中remove的一些坑小结
2021/01/04 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
三年级小学生评语
2014/04/22 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
暑期社会实践证明书
2014/11/17 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
Windows server 2016服务器基本设置
2022/08/14 Servers