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 相关文章推荐
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
详解node和ES6的模块导出与导入
Feb 19 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
javascript数组的使用
2013/03/28 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
几个Shell Script面试题
2012/08/31 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
医院辞职信范文
2014/01/17 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle