AbortController简介

AbortController是一个Web API，它提供了一个信号对象（AbortSignal），该对象可以用来取消与Fetch API相关的操作。当创建AbortController实例时，会自动生成一个与之关联的AbortSignal对象。可以将这个AbortSignal对象作为参数传递给fetch函数，从而实现对网络请求的取消控制。

AbortController使用

创建AbortController实例：

const controller = new AbortController();

获取AbortSignal对象：通过AbortController实例的signal属性获取

const signal = controller.signal;

使用signal对象发起fetch请求：调用fetch函数时，将signal对象作为选项对象的signal属性传递进去

fetch(url, { signal: controller.signal }).then(response => {
    // 处理响应数据
}).catch(error => {
    if (error.name === 'AbortError') {
        console.log('Fetch 请求已被取消');
    } else {
        // 处理其他错误
    }
});

取消fetch请求：需要取消请求时，只需调用AbortController实例的abort方法

controller.abort();

调用abort方法后，与该AbortController实例关联的fetch请求会被中断，并在Promise链中抛出一个带有name属性为AbortError的错误。

注意事项

1. 及时清理资源
   当请求被取消后，确保及时清理与请求相关的资源，避免内存泄漏或其他潜在问题。
2. 错误处理
   在处理fetch请求的Promise链时，要特别注意AbortError的处理。确保能够区分是因取消请求而引发的错误还是其他类型的错误，以便进行正确的错误处理。
3. 多次调用abort
   abort方法可以被多次调用，但第二次及以后的调用不会有任何效果。一旦请求被取消，它将保持取消状态。
4. 与其他API的兼容性
   虽然AbortController在现代浏览器中的支持已经相当广泛，但在一些较老的浏览器版本中可能还不支持。因此，在使用AbortController时，要注意检查目标浏览器的兼容性情况，并考虑使用Polyfill或备选方案来确保功能的可用性。
5. 不要滥用
   虽然AbortController提供了取消请求的能力，但并不意味着我们应该滥用它。频繁地取消和重新发起请求可能会对服务器造成不必要的负担，也可能影响用户体验。因此，在使用AbortController时，要谨慎考虑是否真的需要取消请求，并尽量避免不必要的取消操作。

使用示例

取消一个正在进行的fetch请求

场景：在用户点击取消按钮时取消一个正在进行的fetch请求

// 假设我们有一个取消按钮  
const cancelButton = document.querySelector('#cancel-button');  
  
// 创建AbortController实例和获取signal对象  
const controller = new AbortController();  
const signal = controller.signal;  
  
// 发起fetch请求  
fetch(url, { signal }).then(response => {  
    // 处理响应数据  
}).catch(error => {  
    if (error.name === 'AbortError') {  
        console.log('Fetch 请求已被取消');  
    } else {  
        // 处理其他错误  
    }  
});  
  
// 当用户点击取消按钮时，取消fetch请求  
cancelButton.addEventListener('click', () => {  
    controller.abort();  
});