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版)
Nov 19 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
vue-router单页面路由
Jun 17 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
详解javascript void(0)
2020/07/13 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python查找相似单词的方法
2015/03/05 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
pytorch 修改预训练model实例
2020/01/18 Python
Django admin组件的使用
2020/10/24 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
协议书格式
2014/04/23 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
中层干部考核评语
2015/01/04 职场文书
员工表扬信怎么写
2015/05/05 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS