原创

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

https://static.surmon.me/nodepress/image/fetching-abort.png

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

结构图:

https://static.surmon.me/18-12-6/16187363.jpg

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

内部队列

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

结构图:

https://static.surmon.me/18-12-6/40696642.jpg

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

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

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

完了。

本文于   2018/12/6 下午  发布在  宁静寺  分类下,当前已被围观  131  次

相关标签: Web开发 Javascript

永久地址: https://surmon.me/article/129

版权声明: 自由转载-署名-非商业性使用   |   Creative Commons BY-NC 3.0 CN