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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
Python的一些用法分享
2012/10/07 Python
Python pass 语句使用示例
2014/03/11 Python
python实现汉诺塔算法
2021/03/01 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python如何测试stdout输出
2020/08/10 Python
Django数据统计功能count()的使用
2020/11/30 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
应届毕业生个人自我评价
2013/09/20 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
怎么写好自荐书
2014/03/02 职场文书
疾病防治方案
2014/05/31 职场文书
迎新生标语大全
2014/10/06 职场文书
政风行风建设整改方案
2014/10/27 职场文书
2014年残联工作总结
2014/11/21 职场文书
我的长征观后感
2015/06/09 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL