取消JavaScript请求：XMLHttpRequest、Fetch 和axios 的详细指南

前端

2023-09-05 18:01:16

前言

在网络应用程序中，我们经常需要向服务器发送请求以获取数据或执行某个操作。有时，我们可能需要取消这些请求，原因可能是用户取消了操作、网络连接出现问题或者服务器响应太慢。

JavaScript提供了多种方法来取消请求，包括：

XMLHttpRequest
Fetch
axios

在这篇文章中，我们将详细介绍如何使用这些API来取消请求。

XMLHttpRequest

XMLHttpRequest是JavaScript中最早的用于发送HTTP请求的API。它提供了多种方法来取消请求，包括：

abort()方法：此方法会立即取消请求，并抛出AbortError异常。
onabort事件处理程序：此事件处理程序会在请求被取消时触发。

以下是一个使用XMLHttpRequest取消请求的示例：

const xhr = new XMLHttpRequest();

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

xhr.onabort = function() {
  console.log('Request was cancelled');
};

xhr.send();

xhr.abort();

Fetch

Fetch是JavaScript中用于发送HTTP请求的较新的API。它提供了两种方法来取消请求：

abort()方法：此方法会立即取消请求，并抛出AbortError异常。
signal选项：您可以将AbortController实例传递给fetch()函数的signal选项，当AbortController实例被中止时，请求将被取消。

以下是一个使用Fetch取消请求的示例：

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

fetch('https://example.com/api/data', {
  signal
})
.then(response => {
  // Handle response
})
.catch(error => {
  if (error.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    // Handle other errors
  }
});

controller.abort();

axios

axios是一个流行的JavaScript库，用于发送HTTP请求。它提供了多种方法来取消请求，包括：

cancelToken选项：您可以将CancelToken实例传递给axios()函数的cancelToken选项，当CancelToken实例被中止时，请求将被取消。
abort()方法：此方法会立即取消请求，并抛出AbortError异常。

以下是一个使用axios取消请求的示例：

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

axios.get('https://example.com/api/data', {
  cancelToken
})
.then(response => {
  // Handle response
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request was cancelled');
  } else {
    // Handle other errors
  }
});

controller.abort();