Axios拦截器取消HTTP响应失效及内存泄漏问题排查

嘿，咱们来弄明白为啥访问/Staff路径时，权限校验请求的响应能正常打印，但后面的数据库查询请求响应没出现在控制台里。结合你说的Axios自定义封装和响应拦截器配置，我整理了几个最常见的排查方向和解决办法：

一、先确认二次请求真的发出去了 #

首先得搞清楚这个数据库查询请求到底有没有被发送——要是请求压根没发，自然不会有响应被拦截。你可以这么做：

• 打开浏览器开发者工具的Network面板，筛选XHR/Fetch类型的请求，看看有没有这条数据库查询请求
• 如果请求存在，查看它的状态码和响应内容，确认后端确实返回了数据
• 如果请求不存在，检查业务逻辑里的条件判断（比如权限校验的data.status判断逻辑）是不是哪里卡了，导致请求没触发

二、检查Axios实例是否复用 #

如果你为不同请求创建了多个Axios实例，那得确认数据库查询请求用的是不是配置了响应拦截器的那个实例。举个例子：

// 假设你封装的带拦截器的Axios实例是这个
const api = axios.create({ baseURL: '/api' });
api.interceptors.response.use(res => {
  console.log('响应拦截:', res);
  return res;
});

// 权限校验用了这个实例，没问题
api.get('/auth/check');

// 但数据库查询用了原生Axios或者另一个没加拦截器的实例
axios.get('/staff/list'); // 这个请求的响应肯定不会被打印

解决办法：所有需要被拦截的请求，都统一用同一个配置了拦截器的Axios实例。

三、补全响应拦截器的错误处理逻辑 #

很多时候我们只写了拦截器的成功回调，忽略了错误情况——如果数据库查询请求返回了4xx/5xx这类错误状态码，默认会进入拦截器的错误回调。你可以检查下拦截器代码是不是完整：

api.interceptors.response.use(
  // 成功响应的处理
  (response) => {
    console.log('响应拦截:', response);
    // 别忘了返回响应，不然后续请求的.then拿不到数据
    return response;
  },
  // 一定要加上错误回调，不然错误响应不会被打印
  (error) => {
    console.log('错误响应拦截:', error.response);
    // 抛出错误或者处理后返回，不然会阻断Promise链
    return Promise.reject(error);
  }
);

要是之前没写错误回调，数据库查询请求如果返回错误状态码，就不会被打印出来。

四、检查拦截器的打印逻辑有没有条件限制 #

有时候拦截器里会加一些条件判断，比如只打印data.status符合特定值的响应：

api.interceptors.response.use(res => {
  if (res.data.status === 'success') {
    console.log(res);
  }
  return res;
});

如果数据库查询请求的data.status不是预期的值，就会跳过打印。你可以检查下拦截器里的打印代码有没有这类条件限制。

五、确认异步逻辑的顺序没问题 #

权限校验是异步请求，你得确保是在权限校验成功后才发起数据库查询请求。比如这种写法是对的：

api.get('/auth/check').then(res => {
  if (res.data.status === 'ok') {
    // 权限通过后再发起查询请求
    api.get('/staff/list');
  }
});

不过这种情况一般不会导致拦截器不生效，除非你的Axios实例是在权限校验后才创建的，那查询请求用的实例可能没加拦截器——这种场景比较少见，但也可以排查下。

你可以先从前面两个方向入手：先看Network面板确认请求是否发送，再检查拦截器的错误回调有没有配置。这两个是最容易踩坑的点。

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