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注入技巧
Jun 22 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
javascript正则表达式总结
Feb 29 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
ios中视频的最后一桢问题解决
May 14 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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
JavaScript中的私有成员
2006/09/18 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python退火算法在高次方程的应用
2018/07/26 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
numpy.where() 用法详解
2019/05/27 Python
python调用摄像头的示例代码
2020/09/28 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
大学生自我鉴定书
2014/03/24 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js