当前位置： 首页 > news >正文

Web API：AbortController

news 来源：原创 2025/8/26 6:08:34

Web API：AbortController

    • 主要用途
    • 基本工作原理
    • 基本用法示例
    • 高级用例
      • 1. 实现请求超时
      • 2. 取消多个请求
      • 3. 与其他异步 API 一起使用
    • 浏览器支持
    • 总结

主要用途

AbortController 是一个 Web API，主要用于取消一个或多个 Web 请求（如 fetch 请求）或终止其他异步操作。它提供了一种标准化的方式来中断正在进行的操作，特别是在以下情况下非常有用：

  1. 用户离开页面或切换视图时取消未完成的网络请求
  2. 实现超时机制
  3. 取消不再需要的长时间运行的操作
  4. 避免竞态条件（race conditions）

基本工作原理

AbortController 的工作原理基于以下组件：

  1. AbortController：控制器对象，用于创建中止信号并触发中止操作
  2. AbortSignal：表示中止状态的信号对象，可以传递给支持中止的 API

基本用法示例

// 创建一个 AbortController 实例
const controller = new AbortController();// 获取与控制器关联的信号
const signal = controller.signal;// 使用 fetch API 并传入信号
fetch('https://api.example.com/data', { signal }).then(response => response.json()).then(data => console.log(data)).catch(err => {// 当请求被中止时，错误类型为 AbortErrorif (err.name === 'AbortError') {console.log('Fetch request was aborted');} else {console.error('Fetch error:', err);}});// 在需要时中止请求
// 例如：用户点击取消按钮、设置超时等
controller.abort();

高级用例

1. 实现请求超时

function fetchWithTimeout(url, options = {}, timeout = 5000) {const controller = new AbortController();const { signal } = controller;// 设置超时const timeoutId = setTimeout(() => controller.abort(), timeout);return fetch(url, { ...options, signal }).then(response => {clearTimeout(timeoutId);return response;}).catch(err => {clearTimeout(timeoutId);throw err;});
}// 使用
fetchWithTimeout('https://api.example.com/data', {}, 3000).then(response => response.json()).then(data => console.log(data)).catch(err => {if (err.name === 'AbortError') {console.log('Request timed out');} else {console.error(err);}});

2. 取消多个请求

const controller = new AbortController();
const { signal } = controller;// 多个使用同一信号的请求
Promise.all([fetch('/api/data1', { signal }),fetch('/api/data2', { signal }),fetch('/api/data3', { signal })
])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(dataArray => console.log(dataArray))
.catch(err => {if (err.name === 'AbortError') {console.log('All requests were aborted');}
});// 一次调用可以取消所有请求
controller.abort();

3. 与其他异步 API 一起使用


// 与 DOM API 一起使用
const controller = new AbortController();
const { signal } = controller;document.addEventListener('mousemove', event => {console.log(event.clientX, event.clientY);
}, { signal });// 稍后取消事件监听
controller.abort();

浏览器支持

AbortController 在所有现代浏览器中得到广泛支持，包括：

  • Chrome 66+
  • Firefox 57+
  • Safari 12.1+
  • Edge 16+

对于不支持的浏览器，可以使用 polyfill。

总结

AbortController 是一个强大的 Web API，专门用于：

  • 取消进行中的网络请求
  • 停止不再需要的异步操作
  • 实现请求超时逻辑
  • 防止竞态条件
  • 在用户交互变化时优雅地处理资源清理

它提供了一种标准且优雅的方式来管理异步操作的生命周期，特别是在单页应用程序中，对于提高用户体验和资源利用效率非常重要。

相关文章：

Web API：AbortController

Web API：AbortController 主要用途基本工作原理基本用法示例高级用例1. 实现请求超时2. 取消多个请求3. 与其他异步 API 一起使用 浏览器支持总结 主要用途 AbortController 是一个 Web API，主要用于取消一个或多个 Web 请求（如 fetch 请求&…...

编程日记 2025/8/26 6:08:34

服务器配置虚拟IP

服务器配置虚拟IP的核心步骤取决于具体场景，主要包括本地单机多IP配置和高可用集群下的虚拟IP管理两种模式。‌ 一、本地虚拟IP配置（单服务器多IP） ‌基于Linux系统‌： ‌确认网络接口‌：使用 ip addr 或 ifconfig 查…...

编程日记 2025/8/26 6:03:50

《AI大模型应知应会100篇》第5篇：大模型发展简史：从BERT到ChatGPT的演进

第5篇：大模型发展简史：从BERT到ChatGPT的演进 摘要 近年来，人工智能领域最引人注目的进步之一是大模型（Large Language Models, LLMs）的发展。这些模型不仅推动了自然语言处理（NLP）技术的飞跃&…...

编程日记 2025/8/26 6:03:49

小球反弹(蓝桥杯C语言)

有一长方形，长为 343720343720 单位长度，宽为 233333233333 单位长度。在其内部左上角顶点有一小球 (无视其体积)，其初速度如图所示且保持运动速率不变，分解到长宽两个方向上的速率之比为 dx:dy15:17dx:dy15:17。小球碰到长方形的…...

编程日记 2025/8/24 10:25:30

Java面试39-Zookeeper中的Watch机制的原理

Zookeeper是一个分布式协调组件，为分布式架构下的多个应用组件提供了顺序访问控制能力。它的数据存储采用了类似于文件系统的树形结构，以节点的方式来管理存储在Zookeeper上的数据。 Zookeeper提供了一个Watch机制，可以让客户端感知到Zooke…...

编程日记 2025/8/26 6:03:53

3️⃣ Coze工作流基础教学（2025年全新版本）

目录 一、什么是工作流 二、为什么用工作流 三、工作流使用场景 四、怎么学习工作流 五、工作流功能概述 六、制作工作流基础流程 6.1 创建工作流 6.2 配置工作流 6.3 调试工作流 6.4 发布工作流 6.5 使用工作流 6.6 复制工作流 6.7 删除工作流 6.8 设置工作流异…...

编程日记 2025/8/26 6:03:51

备战蓝桥杯——走迷宫问题（BFS解决）

这是一个经典的BFS算法 1. BFS算法保证最短路径 核心机制：广度优先搜索按层遍历所有可能的路径，首次到达终点的路径长度即为最短步数。这是BFS的核心优势。队列的作用：通过队列按先进先出的顺序处理节点，确保每一步探索的都是当…...

编程日记 2025/8/25 19:23:29

usbip学习记录

USB/IP: USB device sharing over IP make menuconfig配置： Device Drivers -> Staging drivers -> USB/IP support Device Drivers -> Staging drivers -> USB/IP support -> Host driver 如果还有作为客户端的需要，继续做以下配置&a…...

编程日记 2025/8/26 6:01:55

mlir-tblgen 的应用渐进式示例

示例01 -gen-dialect-decls toy_dia.1.toy include "mlir/IR/OpBase.td" //include "mlir/IR/FunctionInterfaces.td" //include "mlir/IR/SymbolInterfaces.td" //include "mlir/Interfaces/SideEffectInterfaces.td"def Toy_Diale…...

编程日记 2025/8/26 6:08:33

AI大模型与未来社会结构的重构：从工具到共生体

一、引言：从蒸汽机到ChatGPT，文明的每一次跃迁都始于“工具的自我进化” 历史长河中，每一次技术革命，都伴随着人类社会组织、认知方式乃至价值体系的巨变。从18世纪的蒸汽机到20世纪的信息技术，再到21世纪的人工智能&…...

编程日记 2025/8/17 23:25:10

2015年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2015年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/23 17:44:52

免费Deepseek-v3接口实现Browser-Use Web UI：浏览器自动化本地模拟抓取数据实录

源码 https://github.com/browser-use/web-ui 我们按照官方教程，修订几个环节，更快地部署 步骤 1：克隆存储库 git clone https://github.com/browser-use/web-ui.git cd web-ui Step 2: Set Up Python Environment 第 2 步：设置…...

编程日记 2025/8/25 20:22:37

Bash判断命令是否存在

在 Bash 脚本里，你可以通过多种方法判断某个命令是否存在。下面为你详细介绍几种常见的判断方式。 1. 使用command -v command -v命令能够返回指定命令的可执行文件路径，如果该命令不存在则不会有输出。借助这一特性，我们可以结合条件判断语…...

编程日记 2025/8/22 7:39:55

双指针(滑动窗口)

用于在数组或字符串的进行快速排序 匹配 排序或移动操作。 双指针不是真的指针，只是用两个变量来表示下标(在后面都用指针来表示) 双指针往往和单调性 排序 联系在一起，暴力往往是O(n方)双指针利用单调性可以优化到o(n) 有对撞指针 快慢指针 美丽区间…...

编程日记 2025/8/22 7:44:26

在PPT中同时自动播放多个视频的方法

在PPT中同时自动播放多个视频的方法 文章目录 在PPT中同时自动播放多个视频的方法1 准备视频2 设置动画为“出现”3 设置所有视频为“自动播放”4 最终效果与其他设置 在PPT制作的过程中，我们经常遇到需要同时自动播放多个视频的情况。本文将详细介绍实现这种效果的…...

编程日记 2025/8/21 14:44:24

使用 Vue 快速集成 FullCalendar 日历组件教程

FullCalendar 是一款功能强大的 JavaScript 日历组件，支持 React/Vue 等主流框架，提供丰富的日历视图和交互功能。本文将手把手教你在 Vue 项目中快速集成，并演示核心功能实现。 📦 主要特性亮点 ✅ 月/周/日多视图切换 ✅…...

编程日记 2025/8/22 7:39:55

xv6-labs-2024 lab2

lab-2 0. 前置 课程记录 操作系统的隔离性，举例说明就是，当我们的shell，或者qq挂掉了，我们不希望因为他，去影响其他的进程，所以在不同的应用程序之间，需要有隔离性，并且&#xff0…...

编程日记 2025/8/21 13:42:32

redis导入成功，缺不显示数据

SpringBootTest class SecurityApplicationTests {AutowiredStringRedisTemplate template; //添加这句代码，自动装载，即可解决文章三处代码报错Testvoid contextLoads() {String compact Jwts.builder().signWith(Jwts.SIG.HS512.key().build()).subj…...

编程日记 2025/8/22 1:20:26

Flink对比Spark streaming、Storm

对比Spark streaming、Storm 产品 模型 语义 容错机制 状态管理 延时 吞吐量 Storm native at-least-once ack 无 low low Spark streaming micro-batch exactly-once RDD checkpoint 有 medium high Flink native exactly-once checkpoint 有 low …...

编程日记 2025/8/22 7:42:26

力扣316去除重复字母-单调栈

题目来源: 给你一个字符串 s ，请你去除字符串中重复的字母，使得每个字母只出现一次。需保证 返回结果的字典序最小（要求不能打乱其他字符的相对位置）。 示例 1： 输入：s "bcabc" 输出&#xff…...

编程日记 2025/8/22 7:40:22

第421场周赛：数组的最大因子得分、

Q1、数组的最大因子得分 1、题目描述 给你一个整数数组 nums。 因子得分 定义为数组所有元素的最小公倍数（LCM）与最大公约数（GCD）的 乘积。 在 最多 移除一个元素的情况下，返回 nums 的 最大因子得分。 注意&…...

编程日记 2025/8/23 17:03:33

COMSOL 与人工智能融合的多物理场应用：28个案例的思路、方法与工具概述

应用案例概述 基于 COMSOL 与人工智能（AI）结合的应用案例涵盖了 28 个多领域场景，包括工程（如热传导优化、结构力学预测）、能源（如电池热管理、燃料电池性能）、生物医学（如药物传递…...

编程日记 2025/8/21 20:15:02

【算法】插入排序

算法系列五：插入排序 一、直接插入排序 1.原理 2.实现 3.性质 3.1时间复杂度 3.2空间复杂度 3.3稳定性 二、希尔排序 1.原理 1.1优化方向 1.2优化原理 2.设计 2.1比较无序时 2.2比较有序时 3.实现 4.性质 4.1时间复杂度 4.2空间复杂度 4.3稳定性…...

编程日记 2025/8/24 5:08:25

企业展示型网站模板HTML5网站模板下载指南

在当今数字化浪潮中，企业网站已成为企业展示形象、推广产品和服务的重要窗口。一个设计精美、功能完善的企业展示型网站，不仅能提升企业的品牌形象，还能吸引潜在客户，促进业务增长。而HTML5网站模板，凭借其跨平台兼容性…...

编程日记 2025/8/22 7:40:22

C盘清理——快速处理

C盘清理 | 快速处理 软件：小番茄C盘清理 https://ccleancdn.xkbrowser.com/cleanmaster/FanQieClean_13054_st.exe 前言：为什么需要专业的C盘清理工具？ 作为一位长期与Windows系统打交道的技术博主，我深知C盘空间不足带来的痛苦…...

编程日记 2025/8/22 7:42:28

什么是模型驱动开发MDD?有哪些应用场景？

模型驱动开发（Model-Driven Development，MDD）是一种以模型为核心的软件开发方法，其核心思想是通过创建高层次的抽象模型来描述系统的结构和行为，而非直接编写代码。这些模型经过自动化工具的转换或生成，最终…...

编程日记 2025/8/22 7:28:05

uniapp小程序生成海报/图片并保存分享

调研结果： 方法一：canvasuni.canvasToTempFilePath耗时太长，现在卡在canvas的绘制有问题，canvas绘制的部分东西不生效但是找不到原因 方法二：使用wxml-to-canvas其实也差不多是用canvas手动绘制，可能会卡在…...

编程日记 2025/8/21 17:18:45

从IoT到AIoT：智能边界的拓展与AI未来趋势预测

文章目录 引言：从连接万物到感知万物1. AIoT的本质：将智能嵌入万物2. AIoT的推动力量与挑战2.1 推动力量2.2 关键挑战 3. 五大AIoT未来趋势预测趋势一：边缘智能将成为主流架构趋势二：AI模型将向自适应与多任务演进趋势三&#xff…...

编程日记 2025/8/24 14:05:45

2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2012年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/24 6:44:02

2140 星期计算

2140 星期计算 ⭐️难度：中等 🌟考点：2022、思维、省赛 📖 📚 1️⃣法一： 同余定理， import java.util.Scanner;public class Main2 {public static void main(String[] args) {Scanner sc …...

编程日记 2025/8/22 7:39:53

NVIDIA Jetson 环境安装指导 PyTorch | Conda | cudnn | docker

本文适用于Jetson Nano、TX1/TX2、Xavier 和 Orin系列的设备，供大家参考。 1、PyTorch不同版本安装 这里适用于Jetson Nano、TX1/TX2、Xavier 和 Orin ，需要JetPack 4.2以上。 下载地址：PyTorch for Jetson - Jetson & Embedded System…...

编程日记 2025/8/22 7:36:13

理解 Rust 中的 String 分配机制

在 Rust 中，哪怕是一行再普通不过的代码，也可能暗藏玄机。这次我们就来剖析这样一句看似简单的代码： let s "hello world".to_string();这行代码触发了 只读数据段（.rodata）、堆（heap&#xff0…...

编程日记 2025/8/22 7:40:25

园区网拓扑练习

1.拓扑图要求 1.按照图示的VLAN及IP地址需求，完成相关配需 2、要求SW1为VLAN 2/3的主根及主网关，SW2为vlan 20/30的主根及主网关，SW1和SW2互为备份 3.上层通过静态路由协议完成数据通信过程 4.AR1为企业出口路由器 5.要求全网可达 2.需求分…...

编程日记 2025/8/22 7:40:55

CentralCache

目录 一、Span和Spanlist 二、CentralCache 一、Span和Spanlist CentralCache其实也是哈希桶结构，只不过他是一个个的Span（Span是管理一定数量的页的结构），而且Span会管理一个freelist，用来挂起一个个的小内存块给Th…...

编程日记 2025/8/22 7:39:54

STM32 基础1

什么是GPIO的上拉和下拉电阻 下拉电阻：把一个不确定的信号通过电阳连接到地，其实就是初始化为低电平。 上拉电阻：把一个不确定的信号通过电连接到高电平，其实就是初始化为高电平。 本质：上拉地注入电流，下…...

编程日记 2025/8/22 7:42:55

Python爬虫第5节-urllib的异常处理、链接解析及 Robots 协议分析

目录 一、处理异常 1.1 URLError 1.2 HTTPError 二、解析链接 2.1 urlparse() 2.2 urlunparse() 2.3 urlsplit() 2.4 urlunsplit() 2.5 urljoin() 2.6 urlencode() 2.7 parse_qs() 2.8 parse_qsl() 2.9 quote() 2.10 unquote() 三、分析网站Robots协议 3.1 R…...

编程日记 2025/8/22 7:39:54

STM32——DAC转换

DAC简介 DAC，全称：Digital-to-Analog Converter，扑指数字/模拟转换器 ADC和DAC是模拟电路与数字电路之间的桥梁 DAC的特性参数 1.分辨率： 表示模拟电压的最小增量，常用二进制位数表示，比如&#xff1a…...

编程日记 2025/8/22 7:37:55

因果推断【Causal Inference】（一）

文章目录 1. 什么是因果推断？2. 为什么要提出因果推断？Motivation：辛普森悖论Scenario 1Scenario 2 3. 【Note】相关性≠因果3.1 混淆(Confounding)——共同原因3.2 样本选择偏差(Selection Bias)——共同结果 4. 潜在结果(Potential Outcome…...

编程日记 2025/8/22 7:42:27

人工智能通识速览（Part5. 大语言模型）

五、大语言模型 1.NLP 自然语言处理（Natural Language Processing, NLP）是人工智能领域的一个重要分支，专注于研究 计算机如何理解、生成和处理人类语言。它的目标是让机器能够像人类一样“读懂”文本或语音，并执 行翻译、问答、摘…...

编程日记 2025/8/22 7:43:42

优化 Django 数据库查询

优化 Django 数据库查询 推荐超级课程： 本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 优化 Django 数据库查询**理解 N+1 查询问题****`select_related`：外键的急加载**示例何时使用 `select_re…...

编程日记 2025/8/22 7:44:59

MCP AI：下一代智能微服务控制平台 (.NET Core)

平台概述 MCP AI (Microservice Control Platform AI) 是基于.NET Core构建的下一代智能微服务控制平台，旨在为企业级微服务架构提供智能化、自动化的管理和控制能力。 核心特性 智能服务编排 AI驱动的动态服务路由 自适应负载均衡算法 预测性扩展与收缩 统一…...

编程日记 2025/8/22 7:40:55

计算机网络基础：系列教程汇总

计算机网络基础：系列教程汇总 一、前言二、计算机网络基础概要三、计算机网络基础3.1 计算机网络基础：揭开网络世界的神秘面纱3.2 计算机网络基础：剖析网络的构成要素3.3 计算机网络基础：认识网络拓扑结构3.4 计算机网络基础：解析网络协议3.5 计算机网络基础：了解网络类型…...

编程日记 2025/8/22 7:36:14

互联网三高-高性能之JVM调优

1 运行时数据区 JVM运行时数据区是Java虚拟机管理的内存核心模块，主要分为线程共享和线程私有两部分。 （1）线程私有 ① 程序计数器：存储当前线程执行字节码指令的地址，用于分支、循环、异常处理等流程控制‌ ② 虚拟机…...

编程日记 2025/8/22 7:38:29

学习比较JVM篇（六）：解读GC日志

一、前言 在之前的文章中，我们对JVM的结构、垃圾回收算法、垃圾回收器做了一些列的讲解，同时也使用了JVM自带的命令行工具进行了实际操作。今天我们继续讲解JVM。 我们学习JVM的目的是为了了解JVM，然后优化对应的参数。那么如何了解JVM运行…...

编程日记 2025/8/22 7:38:29

说说你对python的理解，有什么特性？

Python是一种高级、解释型、通用的编程语言，由Guido van Rossum于1991年首次发布。经过30多年的发展，Python已成为最受欢迎的编程语言之一，在Web开发、数据分析、人工智能、自动化运维等多个领域都有广泛应用。 Python的核心特性 1. 简洁优…...

编程日记 2025/8/22 7:37:56

【C语言】编译和链接

一、编译环境和运行环境 在ANSI C的任何一种实现中，存在着两个不同的环境： 1、翻译环境：在翻译环境中，其会通过编译和链接两个大的步骤，其中编译又分为了预处理（这 个我们后面还会详细讲解&#x…...

编程日记 2025/8/24 15:03:33

Spark，IDEA编写Maven项目

IDEA中编写Maven项目 1.打开IDEA新建项目 2.选择java语言，构建系统选择Maven 3.IDEA中配置Maven 注：这些文件都是我们老师帮我们在网上找了改动后给我们的，大家可自行在网上查找 编写代码测试HDFS连接 1.在之前创建的pom.xml文件中添加下列…...

编程日记 2025/8/22 7:40:54

【HFP】蓝牙HFP服务层连接与互操作性核心技术研究

目录 一、互操作性设计哲学 二、服务级别连接（SLC）架构设计 2.1 连接建立流程总览 2.2 核心交互时序图 2.3 关键阶段技术实现 2.4 RFCOMM连接：通信的基石 2.5 特征交换与编解码协商 2.6 指示器状态同步 三、状态同步机制深度优化 3…...

编程日记 2025/8/22 7:40:53

VSCode使用Remote-SSH连接服务器时启动失败glibc不符合

问题 远程主机可能不符合glibc和libstdc VS Code服务器的先决条件 原因 VSCode更新后，如果服务端GLIBC低于v2.28.0版本将不再满足需求 查看服务端GLIBC版本： ~$ ldd --version ldd (Ubuntu GLIBC 2.23-0ubuntu11.3) 2.23解决 下载V1.85版本 下载链…...

编程日记 2025/8/22 7:40:23

InceptionNeXt:When Inception Meets ConvNeXt论文翻译

论文名称：InceptionNeXt:WhenInceptionMeetsConvNeXt 论文地址：https://arxiv.org/pdf/2303.16900.pdf 摘要： 受视觉Transformer(ViTs)长距离建模能力的启发，大核卷积因能扩大感受野、提升模型性能而受到广泛研究与应用&#x…...

编程日记 2025/8/22 7:42:25