使用AbortController取消异步操作

什么是 AbortController？

• 作用：提供一种机制来中止正在进行的异步任务（例如网络请求、文件读取等）。
• 核心组成：

  • .signal：一个 AbortSignal 对象，可传递给支持取消的操作（如 fetch）。

  • .abort()：调用该方法会触发取消（将 signal.aborted 设为 true）。

典型使用场景（配合 fetch）：

class Example {
  constructor() {
    this.controller = new AbortController(); // 初始化控制器
  }

  async fetchData() {
    try {
      const response = await fetch('https://api.example.com/data', {
        signal: this.controller.signal // 将 signal 传入 fetch
      });
      return await response.json();
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('请求已被取消');
      } else {
        console.error('请求失败:', err);
      }
    }
  }

  cancelRequest() {
    this.controller.abort(); // 主动取消请求
  }
}

// 使用示例：
const example = new Example();
example.fetchData();
// 在需要时取消：
example.cancelRequest(); // 中止请求

为什么要用 AbortController？

1.避免内存泄漏：在组件卸载时取消未完成的请求（常见于 React/前端框架）。
2.用户控制：允许用户中断耗时操作（如文件上传、大数据加载）。
3.性能优化：在页面跳转或超时后停止不必要的网络请求。

注意事项：

• 调用 abort() 会拒绝 fetch 的 Promise，并抛出 AbortError 错误。
• 不可复用：一个 AbortController 只能取消一次操作，后续需新建实例。