vue interceptor 使用教程实例详解


Posted in Javascript onSeptember 13, 2018

二次封装axios,根据参数来实现多个请求多次拦截

1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑

import Vue from 'vue'
import axios from 'axios'
//取消请求
let CancelToken = axios.CancelToken
//设置默认请求头,如果不需要可以取消这一步
axios.defaults.headers = {
  'X-Requested-With': 'XMLHttpRequest'
}
// 请求超时的时间限制
axios.defaults.timeout = 20000
// 开始设置请求 发起的拦截处理
// config 代表发起请求的参数的实体
axios.interceptors.request.use(config => {
  // 得到参数中的 requestName 字段,用于决定下次发起请求,取消对应的 相同字段的请求
  // 如果没有 requestName 就默认添加一个 不同的时间戳
  let requestName
  if(config.method === 'post'){
    if(config.data && config.data.requestName){
      requestName = config.data.requestName
    }else{
      requestName = new Date().getTime()
    }
  }else{
    if(config.params && config.params.requestName){
      requestName = config.params.requestName
    }else{
      requestName = new Date().getTime()
    }
  }
  // 判断,如果这里拿到的参数中的 requestName 在上一次请求中已经存在,就取消上一次的请求
  if (requestName) {
    if (axios[requestName] && axios[requestName].cancel) {
      axios[requestName].cancel()
    }
    config.cancelToken = new CancelToken(c => {
      axios[requestName] = {}
      axios[requestName].cancel = c
    })
  }
  return config
}, error => {
  return Promise.reject(error)
})
// 请求到结果的拦截处理
axios.interceptors.response.use(config => {
  // 返回请求正确的结果
  return config
}, error => {
  // 错误的请求结果处理,这里的代码根据后台的状态码来决定错误的输出信息
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break
      case 401:
        error.message = '未授权,请重新登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = '请求错误,未找到该资源'
        break
      case 405:
        error.message = '请求方法未允许'
        break
      case 408:
        error.message = '请求超时'
        break
      case 500:
        error.message = '服务器端出错'
        break
      case 501:
        error.message = '网络未实现'
        break
      case 502:
        error.message = '网络错误'
        break
      case 503:
        error.message = '服务不可用'
        break
      case 504:
        error.message = '网络超时'
        break
      case 505:
        error.message = 'http版本不支持该请求'
        break
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    error.message = "连接到服务器失败"
  }
  return Promise.reject(error.message)
})
// 将axios 的 post 方法,绑定到 vue 实例上面的 $post
Vue.prototype.$post = function (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res)
      }).catch(err => {
      reject(err)
    })
  })
}
// 将axios 的 get 方法,绑定到 vue 实例上面的 $get
Vue.prototype.$get = function (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res) // 返回请求成功的数据 data
    }).catch(err => {
      reject(err)
    })
  })
}
// 请求示例
// requestName 为多余的参数 作为请求的标识,下次发起相同的请求,就会自动取消上一次还没有结束的请求
// 比如正常的请求参数只有一个 name: '123',但是这里我们需要额外再加上一个 requestName
/**
  this.$post(url, { name: '123', requestName: 'post_1' })
    .then(res => {
      console.log(`请求成功:${res}`)
    })
 */
export default axios

2. 再 main.js 中引入该文件

import { axios } from './static/js/axiosTool'

3. 在组件中直接使用即可

this.$post(this.url2, {
  name: "王",
  docType: "pson",
  requestName: 'name02'
}).then(res => {
  console.log(res)
})

this.$get(this.url, {
  name: "李",
  requestName: 'name01'
}).then(res => {
  console.log(res)
})

4. 效果如图:

vue interceptor 使用教程实例详解

总结

以上所述是小编给大家介绍的vue interceptor 使用教程实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
Vue点击切换颜色的方法
Sep 13 #Javascript
node中的cookie的具体使用
Sep 13 #Javascript
vue动态改变背景图片demo分享
Sep 13 #Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 #Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 #Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 #Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php遍历目录方法小结
2015/03/10 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python os库常用操作代码汇总
2020/11/03 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
生物制药专业求职信
2014/03/11 职场文书
保险公司晨会主持词
2014/03/22 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2019各种承诺书范文
2019/06/24 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
MySQL深分页问题解决思路
2022/12/24 MySQL