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版DateAdd和DateDiff函数代码
Mar 01 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
node 版本切换的实现
Feb 02 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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 UTF8编码内的繁简转换类
2009/07/20 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php时区转换转换函数
2014/01/07 PHP
php通过session防url攻击方法
2014/12/10 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python读取中文txt文本的方法
2018/04/12 Python
python进阶之自定义可迭代的类
2019/08/20 Python
使用python去除图片白色像素的实例
2019/12/12 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
国际贸易系求职信
2014/08/09 职场文书
招商引资工作汇报
2014/10/28 职场文书
圣诞节开幕词
2015/01/29 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript