axios使用拦截器统一处理所有的http请求的方法


Posted in Javascript onNovember 02, 2018

axios使用拦截器

  在请求或响应被 then 或 catch 处理前拦截它们。

http request拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

http respones拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
 }, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
 });

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为自定义axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

PS:下面看下axios拦截器使用

import axios from 'axios' // axios引用
import store from '../../store' // store引用
const serivce = axios.create({ // 创建服务
 baseURL: 'http://test.api.rujiaowang.net', // 基础路径
 timeout: 5000 // 请求延时
})
serivce.interceptors.request.use( // 请求拦截
 config => {
  if (store.getters.userToken) {
   config.headers['X-Token'] = store.getters.userToken
   config.headers['User-Type'] = store.getters.userType ? store.getters.userType : '' // 请求头中存放用户信息
   config.onUploadProgress = (progressEvent) => {
    var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
    store.dispatch('setupLoadPercent', complete)
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)
serivce.interceptors.response.use( // 回复拦截,主要针对部分回掉数据状态码进行处理
 response => {
  return response
 },
 error => {
  return Promise.reject(error)
 }
)
export default serivce

总结

以上所述是小编给大家介绍的axios使用拦截器统一处理所有的http请求的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
canvas 实现中国象棋
Feb 17 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 #Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
python批量修改图片大小的方法
2018/07/24 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
django的settings中设置中文支持的实现
2019/04/28 Python
django 类视图的使用方法详解
2019/07/24 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
python如何设置静态变量
2020/09/07 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
直接有效的自我评价
2014/01/11 职场文书
普通员工辞职信
2014/01/17 职场文书
优秀教师先进事迹
2014/01/22 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2014年度思想工作总结
2014/11/27 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis