在前端开发中，经常需要发送HTTP请求来获取数据。使用fetch或axios等AJAX库可以方便地发送和处理HTTP请求。但是，在某些情况下，我们可能需要终止正在进行的请求，例如用户在发送请求后取消操作、页面切换或网络问题等。为此，我们可以使用AbortController API来中断原生fetch或axios请求。
AbortController简介
AbortController是浏览器提供的一个API，用于中止正在进行的异步任务，包括网络请求、定时器、Web Workers等。它可以与Promise、fetch、XMLHttpRequest和其他任何可取消的操作一起使用，以便在需要时中止这些操作。
AbortController API由两个主要组成部分构成：AbortController和AbortSignal。AbortController表示一个控制器对象，用于管理AbortSignal的状态。AbortSignal表示一个信号对象，用于指示异步操作是否已被取消。
AbortSignal有一个名为aborted的属性，该属性在异步操作被取消时设置为true。我们可以通过监听此属性来检查是否已中止异步操作。
中断原生fetch请求
在使用原生fetch进行HTTP请求时，我们可以通过传递AbortController.signal信号到fetch方法中，以便随时中止请求。
const controller = new AbortController();
const signal = controller.signal;
fetch(url, { signal })
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === "AbortError") {
console.log("请求已中止");
} else {
console.log(`发生错误：${err}`);
}
});
// 在需要时中止请求
controller.abort();
在这个例子中，我们首先实例化一个AbortController对象，并获取其signal信号对象。然后，我们使用fetch方法发送HTTP请求并传递该signal信号作为选项。如果需要中止请求，我们可以调用AbortController的abort方法。
在catch块中，我们检查错误类型是否为“AbortError”，以便确定是否已中止请求。如果发生其他错误，则会将错误信息输出到控制台。
中断axios请求
与原生fetch相比，axios具有更多的功能和选项，但是使用AbortController也非常简单。
const controller = new AbortController();
const signal = controller.signal;
axios.get(url, { cancelToken: signal.token })
.then(res => console.log(res.data))
.catch(err => {
if (axios.isCancel(err)) {
console.log("请求已中止");
} else {
console.log(`发生错误：${err}`);
}
});
// 在需要时中止请求
controller.abort();
在这个例子中，我们使用axios.get方法发送HTTP GET请求，并使用cancelToken选项传递AbortController.signal.token。如果需要中止请求，我们可以调用AbortController的abort方法。
在catch块中，我们通过调用axios.isCancel方法来检查错误类型是否为“cancel”。如果是，我们确定请求已被中止。否则，我们将错误信息输出到控制台。
总结
AbortController API提供了一种简单和可靠的方法来中止正在进行的异步操作，包括网络请求。在使用原生fetch或axios库进行HTTP请求时，我们可以通过传递AbortController.signal信号或cancelToken选项来启用中止功能。在需要中止请求时，我们只需要调用AbortController的abort方法即可。使用AbortController可以增强用户体验和性能，并避免不必要的资源浪费。
