ReactJS中Axios请求拦截器启用时响应拦截器不生效问题求解

问题描述 #

有一个ReactJS项目，使用Axios拦截器为需要认证的请求添加JWT token，同时在同一个自定义Axios实例上定义了响应拦截器。只要请求拦截器处于启用状态，响应拦截器就不会在请求结束后触发；注释掉请求拦截器后，响应拦截器就能正常运行，看起来是请求拦截器阻断了Axios后续的拦截流程。

相关代码 #

自定义Axios拦截器文件（导出带拦截逻辑的实例） #

import axios from 'axios'
import { utils } from './index'

let user = null
let token = null

const customAxios = axios.create({})

// Request interceptor
customAxios.interceptors.request.use(
  (req) => handleRequest(req),
  (e) => {
    console.log('Error from request interceptor: ', e.response)
    return handleError(e)
  }
)

// Response interceptor
customAxios.interceptors.response.use(
  (res) => handleResponse(res),
  (e) => {
    console.log('Error intercepted from response: ', e.response)
    return handleError(e)
  }
)

const handleRequest = (request) => {
  addTokenIfExists(request)
  // TODO: future custom request modifiers
  return request
}

const handleResponse = (response) => {
  console.log('Intercepted response:', res)
  // TODO: future custom response modifiers
  return response
}

const handleError = (e) => {
  // TODO: when this works for response add to Redux error variable to display in app
  if (e.response.status === 401) {
    console.log('Code was 401: Authorization error from response')
  }
  return Promise.reject(e)
}

const addTokenIfExists = (req) => {
  user = JSON.parse(window.localStorage.getItem('loggedUser'))
  token = `Bearer ${user ? user.token : null}`

  // Check if token is expired with every request, if it is, remove it from localStorage
  token = utils.checkIfTokenExpired(user, token)

  // Add token to each request if it's found
  if (token) {
    req.headers = {
      ...req.headers,
      Authorization: token,
    }
  }

  console.log('Intercepted request:', req)

  return req
}

export default customAxios

自定义Axios实例使用示例（用户服务文件） #

import axios from '../services/interceptors'

const baseUrl = '/users'

const getUser = async (id) => {
  let res = null

  await axios
    .get(baseUrl + '/' + id)
    .then((req) => {
      res = req.data
    })
    .catch((e) => {
      return Promise.reject(e)
    })

  return res
}

const userService = {
  getUser,
}

export default userService

问题诉求 #

计划用响应拦截器统一处理错误，为前端生成自定义错误对象，但目前无法触发handleResponse()函数的控制台打印，除非移除请求拦截器，需要定位响应拦截器无法触发的原因。

最终排查结果 #

该问题是旧版本Axios（0.21.2）存在的已知bug，将Axios升级到0.25.0及以上版本即可解决。

内容的提问来源于stack exchange，提问作者Jonas Engberg