80% 的前端都不知道 AbortController 究竟有多么强大!

科技   2024-10-24 09:46   福建  

前言

最近发现很多人其实都没用过一个原生的很强大的 API,那就是 AbortController ,可能很多人在用 axios 的时候用过这个 API 来 中断请求,但是其实大部分人不知道,其实 AbortController 不止能用来做这些,它非常强大!

AbortController 的基本用法如下:

  • signal: 打上标记
  • abort: 执行中断

中断请求 & 请求超时

AbortController 可以用来中断请求,大家都知道,但是都是通过 axios,那么原生的请求怎么中断呢?其实 axios 也是基于原生请求封装的嘛~

fetch 请求时可以接收一个 signal 的参数,打上标记,并且通过这个标记所属的实例来进行中断

如果你不想手动去取消请求,而是想做自动的 请求超时,你可以使用 AbortSignal.timeout

事件监听中断

事件监听 是很常见的场景,我们需要使用 addEventListener 去给目标元素绑定事件,并且需要使用 removeEventListener 去中断这些监听

但是其实很多人都不知道,addEventListener 其实可以传入第三个参数,第三个参数可以传入一个对象,这个对象中可以传入一个 signal 的属性,当做中断的标记

所以 AbortController 也可以用在这里,用来中断事件监听,你可以选择用多个 AbortController 实例来分别取消事件的监听

你也可以用同一个 AbortController 实例来取消所有的事件监听

发布订阅

我们可以监听到 abort 的执行,需要对 controller.signal 进行监听 abort 事件

所以其实我们可以通过这个特性,让 AbortController 来充当 发布订阅 的作用

AbortSignal.any

有时候,你的中断条件只依赖于一个 AbortController,而有时候,一个中断条件需要依赖多个 AbortController 来决定,那应该咋做呢?貌似我们刚刚的 signal 只能传入一个

其实,确实只能传入一个,但是我们可以将多个组合成一个,来传入,就像是 Promise.all、Promise.race、Promise.any 那样

而在这里我们可以使用 AbortSignal.any

兼容性

全栈修仙之路
专注分享 TS、Vue3、前端架构和源码解析等技术干货。
 最新文章