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实现随机数生成算法示例代码
Aug 08 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
node.js入门学习之url模块
Feb 25 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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
一个简单计数器的源代码
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
python实现图片转字符画
2021/02/19 Python
python源文件的字符编码知识点详解
2021/03/04 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
教师教学评估方案
2014/05/09 职场文书
欢迎标语大全
2014/06/21 职场文书
安全目标管理责任书
2014/07/25 职场文书
春风化雨观后感
2015/06/11 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android