取消Axios请求：掌握Axios的取消功能

前端

2024-02-01 05:51:32

在现代网络应用程序中，HTTP请求是至关重要的，而Axios则是JavaScript开发人员的首选库，因为它提供了简洁且功能强大的HTTP请求处理功能。然而，在某些情况下，您可能需要取消请求，例如当用户导航离开页面或应用程序时。

Axios中的取消功能

Axios提供了一个内建的取消功能，允许您在请求发出后取消它。这在以下情况下非常有用：

用户导航离开页面或关闭应用程序
请求已过时或不再需要
系统资源不足

取消请求的方法

Axios提供了几种方法来取消请求：

手动取消： 您可以使用cancelToken创建自定义取消令牌，并在需要时调用其cancel方法。
自动取消： 您可以设置超时值，如果请求在此时间内没有完成，则会自动取消。

示例：手动取消

const axios = require('axios');

const cancelToken = axios.CancelToken.source();

axios({
  method: 'get',
  url: 'https://example.com',
  cancelToken: cancelToken.token
}).then((response) => {
  // 请求已完成
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求已被取消
  } else {
    // 发生了其他类型的错误
  }
});

// 取消请求
cancelToken.cancel('Request was canceled');

示例：自动取消

const axios = require('axios');

axios({
  method: 'get',
  url: 'https://example.com',
  timeout: 5000
}).then((response) => {
  // 请求已完成
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求已被取消
  } else {
    // 发生了其他类型的错误
  }
});