如何让Axios的AbortController等待服务器响应？

CancelToken.source() 不适合你的场景，且不推荐使用 #

首先明确：不管是 CancelToken 还是 AbortController，它们都是客户端层面的请求中断机制。调用取消方法（cancel() 或 abort()）后，Axios会立即停止监听请求响应并抛出取消错误，不会等待服务器返回结果——这和HTTP协议的特性有关：客户端发起取消后，只是断开连接或不再处理后续响应，但服务器可能仍会继续执行任务。所以这两种机制都无法满足你“等待服务器返回499状态码再确认取消”的需求。

其次，Axios官方已经将 CancelToken 标记为已弃用（从v0.22.0版本开始），推荐使用标准的 AbortController API替代，后续版本可能会彻底移除 CancelToken 相关实现，因此更不建议在新代码中使用它。

满足需求的解决方案 #

要实现“触发取消后等待服务器返回499确认”的逻辑，不能依赖Axios的客户端取消机制，需要换一种思路：

1. 主动通知服务器终止任务：当需要取消请求时，发送一个额外的指令（比如调用专门的取消接口，或者在原请求的参数/请求头中传递取消标记），让服务器主动终止任务处理并返回499状态码。
2. 保持原请求的监听：不要调用 abort() 或 cancel()，继续等待原请求的响应，根据返回的状态码做对应处理：
   • 若返回499，确认请求已安全取消；
   • 若返回其他成功状态码，按正常流程处理；
   • 若返回错误状态码，按错误逻辑处理。

代码示例 #

以下是一个简单的实现示例：

// 发起业务请求，可选保留signal用于极端情况强制中断
const businessRequest = axios.get('/api/your-task', {
  signal: new AbortController().signal
});

// 触发取消的逻辑
function triggerCancel() {
  // 1. 通知服务器取消目标任务
  axios.post('/api/cancel-task', { taskId: 'target-task-id' })
    .then(() => {
      // 2. 等待原请求的响应结果
      businessRequest
        .then(response => {
          if (response.status === 499) {
            console.log('任务已安全取消');
          } else {
            console.log('任务已完成', response.data);
          }
        })
        .catch(error => {
          // 处理网络错误或其他服务器错误
          console.error('请求处理失败', error);
        });
    });
}

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