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 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
如何利用find命令查找文件
2015/02/07 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
护士自荐信怎么写
2013/10/18 职场文书
给老师的检讨书
2014/02/11 职场文书
客服部工作职责范本
2014/02/14 职场文书
中国梦口号
2014/06/13 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技