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 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
javascript验证身份证号
Mar 03 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JS中Array数组学习总结
Jan 18 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 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
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
javascript FormatNumber函数实现方法
2008/12/30 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
教师简历自我评价
2014/02/03 职场文书
家长写给老师的建议书
2014/03/13 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
法制宣传标语
2014/06/23 职场文书
捐款活动总结
2014/08/27 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android