前言

需求背景：不同的接口需求，axios的拦截器配置也不一样。比如，有的业务场景需要axios有超时跳转到登录页面，有的业务场景无需该提示，那么该如何编写axios，最初，我将axios的response的拦截器放在函数内，如下代码所示：

function genHcParams() {let hcParams = {}let axios = serviceif (window.globalApi) {if (globalApi.useAxiosInterceptors) {axios.interceptors.response.use(response => {if (response && response.headers) {const json = response.dataif (json && json.status) {if (json.status === 'jump') {if (json.result.redirect) {setTimeout(() => {window.location.href = json.result.redirect}, 200)}return}}if (json) {return json}return response} else if (response) {return response}})} else {axios.interceptors.response.use(response => {return response.data})}if (globalApi.isHc || globalApi.isLocalSetZz) {hcParams.ak = 'ebf48ecaa1fd436fa3d40c4600aa051f'axios = serviceHc} else if (globalApi.isMars) {} else {hcParams.coordinate = 'wgs84'}}return {hcParams,axios}

可是遇到一个问题，后端只返回一次接口数据，为何axios.interceptors.response.use里面的函数会被多次执行？

原因

若你使用use，就像Node.js里的use那样，会不断地往axios对象添加interceptors，由于我将该拦截器放在函数内，只要函数被执行，则会再次将拦截器函数增添到axios对象上。

所以，推荐的办法是，将拦截器放在函数外，可我的需求决定了，我必须将它放在函数内，那么该如何解决呢？

方法

添加该文件内的唯一变量标识符let axiosInterceptor = undefined，只要拦截器存在，则不会继续添加，部分代码如下所示：

let axiosInterceptor = undefined;...if (globalApi.useAxiosInterceptors) {if (axiosInterceptor === undefined) {axiosInterceptor = axios.interceptors.response.use(response => {if (response && response.headers) {const json = response.dataif (json && json.status) {if (json.status === 'jump') {if (json.result.redirect) {setTimeout(() => {window.location.href = json.result.redirect}, 200)}return}}if (json) {return json}return response} else if (response) {return response}})}} else {if (axiosInterceptor === undefined) {axiosInterceptor = axios.interceptors.response.use(response => {if (response && response.data) return response.data})}}...

axios的interceptors为何会多次执行相关推荐

Vue+axios（interceptors）实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...
axios interceptors 拦截器 //interceptors.js// vue axios配置发起请求加载loading请求结束关闭loading // http request 请求 ...
axios拦截器interceptors
axios拦截器-interceptors 基本介绍拦截器: 拦截器是axios向服务器端发送请求和响应回来所经历的两道关口. 拦截器关键字:interceptors. axios本身有两种 ...
axios mysql_axios的简单使用
既然官方已经说了不在维护vue-resource,那我们就看看axios是怎么使用的.......... 1)get方法的使用 axios.get axios的初步使用 const c1={ temp ...
给 axios 和 redux-axios-middleware 添加finally方法的使用心得
最近公司让用react写一个钉钉的微应用APP 然后就只能去学了react, 之前一直用angular和vue, 所以异步请求用的都是jquery和axios, 想转来转去麻烦就直接用了axios, ...
axios拦截器设置及其实现原理剖析
axios使用说明文档 axios拦截器设置应用场景请求拦截器用于在接口请求之前做的处理,比如为每个请求带上相应的参数(token,时间戳等). 返回拦截器用于在接口返回之后做的处理,比如对返回的 ...
尚硅谷 Ajax与Axios的使用与关键源码笔记
文章目录 Ajax概述原生Ajax尝试请求的发送与请求头配置 JSON支持 IE缓存问题请求的取消与重发 jQuery的Ajax 使用Axios发送Ajax[简易] 使用fetch发送请求 Aj ...
学习 axios 源码整体架构，打造属于自己的请求库
前言这是学习源码整体架构系列第六篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现.本篇文章学习的是实际仓库的代码. 学习源码整体 ...
Vue axios基础
Vue axios基础基于 promise 的 HTTP 客户端axios axios本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 ...
axios拦截器的原理及应用
1-1 应用场景: 1. 请求拦截器用于在接口请求之前做的处理,比如为每个请求带上相应的参数(token,时间戳等) 返回拦截器用于在接口返回之后做的处理,比如对返回的状态进行判断(token是否过期 ...

axios的interceptors为何会多次执行

前言

原因

方法

axios的interceptors为何会多次执行相关推荐

最新文章

热门文章