使用Axios时本该获取1个响应却得到4个的问题求助

使用Axios发起请求时，预期仅收到1个响应，但实际触发了4次响应回调，可从以下几个方向排查解决：

1. 检查是否重复绑定响应回调 #

确认代码中是否多次调用.then()、.catch()，或是重复添加了Axios响应拦截器。重复绑定会导致同一请求的响应被多次处理。

错误示例：

// 同一请求多次绑定then回调
axios.get('/api/resource')
  .then(res => handleResponse(res))
  .then(res => handleResponse(res)); // 重复触发处理逻辑

解决：每个请求只绑定一次回调逻辑；拦截器仅在全局初始化时注册一次，避免在组件渲染等重复执行的代码块中重复添加。

2. 排查框架组件重复渲染导致的重复请求 #

如果在React、Vue等框架的组件生命周期钩子中发起请求，未正确设置依赖项或清理逻辑，会导致组件重复渲染时多次发送请求。

React错误示例：

useEffect(() => {
  axios.get('/api/resource').then(res => { /* 处理逻辑 */ });
}); // 未设置依赖数组，每次组件渲染都会发送请求

解决：添加正确的依赖数组，或使用CancelToken取消未完成的请求：

useEffect(() => {
  const cancelTokenSource = axios.CancelToken.source();
  
  axios.get('/api/resource', {
    cancelToken: cancelTokenSource.token
  }).then(res => { /* 处理逻辑 */ });

  return () => cancelTokenSource.cancel('组件卸载，取消请求');
}, []); // 空依赖数组确保请求只执行一次

3. 处理浏览器缓存或重定向导致的额外请求 #

查看浏览器网络面板，确认是否存在304缓存响应或3xx重定向状态码，这类情况浏览器可能会自动发起额外请求。

解决：给请求添加时间戳参数禁用缓存：

axios.get('/api/resource', {
  params: { t: Date.now() }
});

4. 检查Axios实例配置 #

如果自定义了Axios实例，确认是否存在重复创建实例、重复配置拦截器的情况，这会导致每个实例的拦截器都处理响应。

解决：全局仅创建一次Axios实例，拦截器仅配置一次。

相关截图 #

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