给 fetch 加一套可退化的中止方案

原创

给 fetch 加一套可退化的中止方案

Fetch 弱于 XHR 的致命一点是没有 abort 机制，但我们有 hack 方案。

AbortController

AbortController 目前还是一个实验特性的 API，官方释义为：中止一个尚未完成的 DOM 请求。这能够中止 fetch 请求，任何响应 Body 的消费者和流。

AbortSignal 用以绑定控制器实例与对应流的关系，并进行通信，AbortController.abort 用以终止绑定的流（向 AbortSignal 发出终止信号）。

code:

              1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
              const controller = new AbortController()
const signal = controller.signal

function fetchVideo() {
  fetch('https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4', { signal })
    .then(res => {
      console.log('res', res)
    })
    .catch(err => {
      console.warn('err', err) // DOMException: The user aborted a request.
    })
}

fetchVideo()
controller.abort()
console.log('Download aborted')

AbortController polyfill

Gtihub: abortcontroller-polyfill

模拟 AbortSignal、AbortController 构造对象，AbortSignal 采用原生 Event 对象派发 abort 事件信号
包装 nativeFetch，识别次参 init 参数中的 AbortSignal 实例，如果包含 signal，则绑定事件监听，当 signal 发出 abort 信号时，主动 Reject Promise

结构图：

点：核心采用 Event 和 addEventListener 进行通信，用 Promise.race 竟态任务维护结果的时序和唯一性。

内部队列

包装 Fetch，扩展 abort 方法
内部维护请求状态，存储请求状态及数据
执行 abort 会改变状态，直到真正的 Resove/Reject 发生时，判断 abort 状态来决定要不要操作，或操作 reject('Abort Error')，但不可以真正取消 Fetch，Promise 也可能会永远处于无响应状态

结构图：