JavaScript axios 取消请求的正确方式

使用 CancelToken 取消请求

Axios 提供了一种基于 CancelToken 的机制来取消请求。这是 Axious 早期版本推荐的标准做法。其核心思路是创建一个 token 实例，将其传递给请求配置，并在需要时调用该实例的取消函数。

第1步：创建 CancelToken 实例

首先，通过 axios.CancelToken.source() 方法创建一个具有 token 属性和 cancel 方法的对象。这个对象将用于管理请求的生命周期。

const { cancel, token } = axios.CancelToken.source();

第2步：发起带 Token 的请求

在调用 axios.get 或其他 HTTP 方法时，在 config 参数中包含 cancelToken 属性，并将其指向刚刚创建的 token。

async function fetchData() {
  try {
    const response = await axios.get('/some/url', { cancelToken: token });
    console.log(response.data);
  } catch (error) {
    // 检查是否是取消操作引起的错误
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      // 处理其他网络错误
      console.error('Other error:', error);
    }
  }
}

第3步：执行取消操作

当需要终止请求时（例如点击取消按钮），调用之前保存的 cancel 函数。这将中断当前的 AJAX 请求，并抛出被 Axios 包装过的 Error 对象，你可以在 catch 块中捕获它。

cancel('User clicked the cancel button.');

使用 AbortController 取消请求

随着 Web 标准的演进，AbortController 成为了更通用的接口。Axios 也支持这一标准，使得 Axios 的行为与原生 fetch API 更加一致。

第1步：初始化 AbortController

创建一个新的 AbortController 实例。

const controller = new AbortController();
const signal = controller.signal;

第2步：传递 Signal 发起请求

在 Axios 配置中，将 signal 属性指向控制器的信号。这样 Axios 内部就能监听中断信号。

async function fetchWithAbort() {
  try {
    const response = await axios.get('/some/url', { signal });
    console.log(response.data);
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Request aborted');
    } else {
      console.error('Fetch failed:', error);
    }
  }
}

第3步：中断请求

在需要的时刻，调用 abort() 方法来中止由 signal 关联的所有请求。

controller.abort();

总结

虽然 CancelToken 是 Axios 早期引入的特性，但在现代前端开发中，使用 AbortController 是一个更好的选择，因为它不仅兼容 Axios，也符合 W3C 标准，并且可以直接应用于原生的 fetch API 调用。对于新项目，建议优先采用第二种方法以确保跨浏览器的最佳兼容性。

以上就是关于 JavaScript 中 Axios 取消请求的详细内容，更多关于 axios 请求管理的资料请关注本站其它相关文章！