React中AbortController与封装API函数配合失效问题排查

以下是针对你遇到的问题的具体排查方向：

1. 验证API封装函数的signal传递逻辑 #

首先检查你封装的API函数是否正确将接收的signal参数传入Axios请求配置中，失效问题大多源于参数传递错误：

错误示例（未传递signal）：

// api.js
import axios from 'axios';
const axiosInstance = axios.create({ baseURL: '/api' });

export const fetchData = async () => {
  // 未接收或传递signal参数
  return axiosInstance.get('/data');
};

正确示例（正确传递signal）：

// api.js
import axios from 'axios';
const axiosInstance = axios.create({ baseURL: '/api' });

export const fetchData = async (signal) => {
  // 将signal放入请求配置对象
  return axiosInstance.get('/data', { signal });
};

2. 检查useEffect中控制器的作用域与传递 #

确保useEffect中创建的AbortController实例唯一，且signal正确传递给API函数，同时清理函数调用的是同一个实例的abort()：

错误示例（作用域混乱或未传signal）：

// 组件文件
import { useEffect } from 'react';
import { fetchData } from './api';

let controller; // 全局变量易导致实例混乱

function MyComponent() {
  useEffect(() => {
    controller = new AbortController();
    fetchData().then(res => console.log(res)); // 未传递signal
    return () => controller.abort();
  }, []);
}

正确示例：

// 组件文件
import { useEffect } from 'react';
import { fetchData } from './api';
import axios from 'axios';

function MyComponent() {
  useEffect(() => {
    const controller = new AbortController();
    // 传递signal给API函数
    fetchData(controller.signal)
      .then(res => console.log(res))
      .catch(err => {
        // 捕获取消错误并打印
        if (axios.isCancel(err)) {
          console.log("Request aborted");
        }
      });
    return () => controller.abort();
  }, []);
}

3. 确保捕获Axios的取消错误 #

如果未在API调用的错误处理中判断取消类型，控制台不会打印“Request aborted”。需要在catch块中做类型判断：

在组件中处理：

fetchData(controller.signal)
  .then(...)
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log("Request aborted");
    } else {
      // 处理其他业务错误
    }
  });

或者在封装的API函数中统一处理：

// api.js
export const fetchData = async (signal) => {
  try {
    return await axiosInstance.get('/data', { signal });
  } catch (err) {
    if (axios.isCancel(err)) {
      console.log("Request aborted");
      throw err; // 抛出错误让组件继续处理
    }
    throw err;
  }
};

4. 确认Axios版本兼容性 #

Axios从0.22.0版本开始原生支持AbortController，如果你的版本低于此，signal参数不会生效。可以通过以下命令查看版本：

npm list axios

若版本过低，升级到最新稳定版：

npm install axios@latest

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