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

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

结构图：

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

内部队列

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

结构图：

缺陷是当你 abort 之后，你的 Promise 可能永远不会有响应，而且不会被释放...

结

1. abort -> abort(Fetch)
2. abort -> Promise.race[Promise.reject(), fetch()]
3. (abort -> aborted) ? Promise.reject() : fetch()

这不是取消 Promise 的问题，而是终止 Fetch 终止 HTTP 的问题，除了原生的 AbortController，不会有更优秀的办法可以做到。

完了。