中止 Web 请求新方式 - AbortController API

**之火2025-09-30 12:18

AbortController 是一个 JavaScript API，用于中止一个或多个 Web 请求。它最初是 Fetch API 的一部分，但现在已成为一个独立的接口，可以用于其他异步任务。

AbortController 是 Web 标准的一部分，由 WHATWG 制定，是现代浏览器原生支持的 API。

核心用途

AbortController 的主要作用是提供一种标准化的方式来取消正在进行的异步操作，比如：

取消 fetch 请求
中止 XMLHttpRequest
停止其他异步任务
清理事件监听器

**示例1：**基础使用

javascript 复制代码

const controller = new AbortController();

axios.get('https://api.example.com/data', {
  signal: controller.signal
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.name === 'CanceledError') {
      console.log('请求已取消');
    } else {
      console.error('其他错误:', error);
    }
  });

// 取消请求
controller.abort();

**示例2：**多个相关请求的取消

javascript 复制代码

class DataFetcher {
  constructor() {
    this.mainController = null;
  }
  
  async fetchUserData(userId) {
    // 取消之前的用户数据请求
    if (this.mainController) {
      this.mainController.abort();
    }
    
    this.mainController = new AbortController();
    const signal = this.mainController.signal;
    
    try {
      // 并行发起多个相关请求
      const [user, posts, friends] = await Promise.all([
        this.fetchUser(userId, signal),
        this.fetchUserPosts(userId, signal),
        this.fetchUserFriends(userId, signal)
      ]);
      
      return { user, posts, friends };
    } catch (error) {
      if (error.name !== 'AbortError') {
        throw error;
      }
    }
  }
  
  async fetchUser(userId, signal) {
    const response = await fetch(`/api/users/${userId}`, { signal });
    return response.json();
  }
  
  async fetchUserPosts(userId, signal) {
    const response = await fetch(`/api/users/${userId}/posts`, { signal });
    return response.json();
  }
  
  async fetchUserFriends(userId, signal) {
    const response = await fetch(`/api/users/${userId}/friends`, { signal });
    return response.json();
  }
}

兼容性处理

javascript 复制代码

// 简单的 polyfill
if (typeof AbortController === 'undefined') {
  class AbortController {
    constructor() {
      this.signal = new AbortSignal();
    }
    abort() {
      this.signal.aborted = true;
      if (this.signal.onabort) {
        this.signal.onabort();
      }
    }
  }
  
  class AbortSignal {
    constructor() {
      this.aborted = false;
      this.onabort = null;
    }
  }
  
  window.AbortController = AbortController;
}

END.