Abort XHR/Fetch 请求的优雅方法

2023-10-13 19:04:50

在现代 Web 开发中，异步请求已成为不可或缺的一部分，XHR 和 Fetch 是两种最常用的技术。然而，在某些情况下，我们可能需要取消正在进行的请求，例如用户在提交表单之前改变了主意，或者我们收到服务器的响应后不再需要其他请求的结果。

XHR 请求的 abort() 方法

对于 XHR 请求，我们可以使用 abort() 方法来取消请求。该方法会立即中止请求，并引发 abort 事件。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.send();

// 在需要取消请求时调用
xhr.abort();

Fetch 请求的 abort() 方法

Fetch 请求也提供了 abort() 方法来取消请求。该方法同样会立即中止请求，但不会引发任何事件。

const request = fetch('https://example.com/api/data');

// 在需要取消请求时调用
request.abort();

设置请求超时时间

我们可以通过设置请求超时时间来间接地取消请求。如果请求在指定的时间内没有收到响应，浏览器会自动中止请求。

const xhr = new XMLHttpRequest();
xhr.timeout = 5000; // 5 秒超时时间
xhr.open('GET', 'https://example.com/api/data');
xhr.send();

使用信号量（Signal）取消请求

ES2017 引入了信号量（Signal）的概念，它可以用来取消异步操作，包括 XHR 和 Fetch 请求。

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

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data');
xhr.signal = signal;
xhr.send();

// 在需要取消请求时调用
controller.abort();

使用 Axios 库取消请求

Axios 是一个流行的 JavaScript 库，它可以简化 HTTP 请求的处理。Axios 提供了内置的取消功能，我们可以使用它来轻松取消请求。

const axios = require('axios');

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

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

// 在需要取消请求时调用
source.cancel('Request canceled');