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

javascript `AbortController`

news 2025/9/22 11:34:33

AbortController 浏览器内置的api，常用于控制被取消的异步操作。
常见用途时取消fetch() 请求， Streams、 Websocket

她包含两个主要部分：

controller 对象：用来创建和触发 取消操作
signal 对象：传递给目标api，让她知道何时需要终止。

基本用法

	const controller = new AbortController()const signal = controller.signal;// zai. fetch() zhong 使用fetch(`https://....`, { signal }).then(res => res.json()).then(data => console.log(data)).catch(err=>{if(err.name === "AbortError"){console.log('请求已被取消');}else {console.error('请求出错:', err);}})// x 秒后取消请求setTimeOut(()=>{controller.abort()
},x)

fetch 开始请求

x 秒后调用 controller.abort()

fetch 会抛出一个 AbortError，我们在 .catch() 中捕获

属性/方法	说明
`new AbortController()`	创建一个控制器实例
`.signal`	读属性，返回一个 `AbortSignal` 对象
`.abort(reason?)`	触发取消操作，可以传入自定义原因
`AbortSignal.aborted`	布尔值，表示是否已被中止
`AbortSignal.reason`	获取传给 `abort()` 的原因
`AbortSignal.addEventListener("abort", handler)`	监听中止事件

多个任务可以共享取消信号

	 const controller = new AbortController()const options = { signal: controller.signal }Promise.all([fetch("https://...", options),fetch("https://...", options),]).catch((err)=>{if(err.name === "AbortError"){console.log('所有请求被取消');}})// 只要调用一次，所有请求都会取消controller.abort();

自定义异步任务

自定义任务取消

  function doSomeTasks(signal) {return  new Promise((resolve,reject)=>{const timer = setTimeOut(()=>{ resolve('任务完成了。。。') },5000)signal.addEventListener('abort', ()=> {clearTimeout(timer)reject(new Error('任务被取消了。。。。'))})})}const  controller = new AbortController()doSomeTasks(controller.signal).catch(err => console.log(err.message))// 1s 后取消setTimeOut(()=>{ controller.abort();},1000)