javascript `AbortController`

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)