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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 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操作符与控制结构代码
2011/12/30 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python实现简易数码时钟
2021/02/19 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Django用户身份验证完成示例代码
2020/04/03 Python
如何使用python切换hosts文件
2020/04/29 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
小学生家长评语大全
2014/02/10 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android