Vue Promise的axios请求封装详解

 更新时间:2018年08月13日 09:34:19   作者:butterflyer  
这篇文章主要介绍了Vue Promise的axios请求封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

现在应该大部分公司都是前后端分离了。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, '请求失败')
        })

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

相关文章

  • Vue3中watch监听器及源码学习

    Vue3中watch监听器及源码学习

    本文主要介绍了Vue3中watch监听器及源码学习,Watch侦听器在Vue3中特性进行了一些改变和优化,下面来详解的介绍一下基本使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue实现全匹配搜索列表内容

    vue实现全匹配搜索列表内容

    这篇文章主要为大家详细介绍了vue实现全匹配搜索列表内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue2项目使用sass的示例代码

    vue2项目使用sass的示例代码

    本篇文章主要介绍了vue项目使用sass的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue百度地图修改折线颜色,添加icon和文字标注方式

    vue百度地图修改折线颜色,添加icon和文字标注方式

    这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue配置文件中的proxy配置方式详解

    Vue配置文件中的proxy配置方式详解

    今天被vue中proxy配置困扰了一天,记录一下,下面这篇文章主要给大家介绍了关于Vue配置文件中的proxy配置方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue-cli 打包使用history模式的后端配置实例

    vue-cli 打包使用history模式的后端配置实例

    今天小编就为大家分享一篇vue-cli 打包使用history模式的后端配置实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    Vue CLI是一个基于Vue.js进行快速开发的完整系统,下面这篇文章主要给大家介绍了关于Vue cli3.0创建Vue项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue数据表格增删改查与表单验证代码详解

    Vue数据表格增删改查与表单验证代码详解

    这篇文章主要给大家介绍了关于Vue数据表格增删改查与表单验证的相关资料,Vue可以通过使用组件化的方式来实现表格的增删改查功能,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • uni-app获取当前环境信息的方法

    uni-app获取当前环境信息的方法

    uni-aap提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息,这篇文章主要介绍了uni-app获取当前环境信息的相关知识,需要的朋友可以参考下
    2022-11-11
  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05

最新评论