轻松掌控网络请求：Axios、Fetch和XMLHttpRequest的取消攻略

Axios

Axios是一个基于Promise的HTTP客户端，它提供了简单、强大的API来发送HTTP请求。要取消Axios请求，可以使用以下方法之一：

• 使用cancelToken ：cancelToken是一个用于取消请求的特殊令牌。您可以通过调用axios.CancelToken.source()来创建一个cancelToken。然后，您可以将cancelToken传递给axios的cancelToken选项，如下所示：

const source = axios.CancelToken.source();

axios.get('https://example.com', {
  cancelToken: source.token
});

//稍后，当您需要取消请求时，可以调用`cancel()`方法：
source.cancel('Operation canceled by the user.');

• 使用abort()方法 ：您也可以使用abort()方法来取消Axios请求。这将在请求中引发AbortError，您可以使用try...catch块来捕获此错误，如下所示：

try {
  const response = await axios.get('https://example.com');
} catch (error) {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    // Handle other errors
  }
}

Fetch API

Fetch API是JavaScript的一个内置API，它提供了更现代、更灵活的方式来发送HTTP请求。要取消Fetch请求，可以使用以下方法之一：

• 使用AbortController ：AbortController是一个用于取消请求的控制器。您可以通过调用new AbortController()来创建一个AbortController。然后，您可以将AbortController的signal属性传递给fetch()的signal选项，如下所示：

const controller = new AbortController();

fetch('https://example.com', {
  signal: controller.signal
});

//稍后，当您需要取消请求时，可以调用`abort()`方法：
controller.abort();

• 使用AbortSignal ：您也可以使用AbortSignal来取消Fetch请求。AbortSignal是一个表示请求是否已被取消的信号。您可以通过调用AbortController.signal来获得AbortSignal。然后，您可以将AbortSignal传递给fetch()的signal选项，如下所示：

const signal = new AbortController().signal;

fetch('https://example.com', {
  signal
});

//稍后，当您需要取消请求时，可以调用`abort()`方法：
signal.abort();

XMLHttpRequest

XMLHttpRequest是JavaScript的一个内置对象，它用于发送HTTP请求。要取消XMLHttpRequest请求，可以使用以下方法之一：

• 使用abort()方法 ：XMLHttpRequest的abort()方法可以取消请求。这将在请求中引发AbortError，您可以使用try...catch块来捕获此错误，如下所示：

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com');
xhr.send();

//稍后，当您需要取消请求时，可以调用`abort()`方法：
xhr.abort();

• 使用onabort事件监听器 ：您也可以使用onabort事件监听器来取消XMLHttpRequest请求。当请求被取消时，onabort事件将被触发。您可以使用此事件来执行某些操作，例如显示错误消息或重新发送请求，如下所示：

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://example.com');
xhr.send();

xhr.onabort = function() {
  // Do something when the request is canceled
};

总结

本文介绍了如何在Axios、Fetch和XMLHttpRequest中取消请求。这些方法可以帮助您轻松管理您的网络请求，并在需要时取消请求。