中止 Web 请求新方式 - AbortController API

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.

相关推荐
l1t9 分钟前
DeepSeek辅助利用搬移底层xml实现快速编辑xlsx文件的python程序
xml·开发语言·python·xlsx
大飞记Python12 分钟前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep1 小时前
【前端】前端运行环境的结构
前端
你的人类朋友1 小时前
【Node】认识multer库
前端·javascript·后端
Aitter1 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
C_Liu_2 小时前
C++:list
开发语言·c++
my rainy days2 小时前
C++:友元
开发语言·c++·算法
小梁努力敲代码2 小时前
java数据结构--List的介绍
java·开发语言·数据结构
mapbar_front2 小时前
面试问题—上家公司的离职原因
前端·面试
云知谷2 小时前
【HTML】网络数据是如何渲染成HTML网页页面显示的
开发语言·网络·计算机网络·html