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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
Javascript倒计时代码
Aug 12 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
超级退弹代码
2008/07/07 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JavaScript Split()方法
2015/12/18 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
详解node.js 事件循环
2020/07/22 Javascript
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python 变量的创建过程详解
2019/09/02 Python
python生成器用法实例详解
2019/11/22 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python3监控疫情的完整代码
2020/02/20 Python
为什么称python为胶水语言
2020/06/16 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
管理标语大全
2014/06/24 职场文书
实验心得体会
2014/09/05 职场文书
农村文化建设标语
2014/10/07 职场文书
租房协议书范例
2014/10/14 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
工作简报格式范文
2015/07/21 职场文书
mysql sql常用语句大全
2022/06/21 MySQL