This website requires JavaScript.
BING
Because the mountain is there
OG

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

1,950 words, 5 min read2018/12/06 PM5,431 views

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,不会有更优秀的办法可以做到。

完了。

Creative Commons BY-NC 3.0 CNhttps://surmon.me/article/129
3 / 3 comments
Guest
Join the discussion...
  • speiling
    Speiling🇨🇳CNShenzhenWindowsChrome
    #1698

    💪💪

  • kkfor
    Kkfor🇨🇳CNShijiazhuangWindowsChrome
    #1003

    想问下站长,右侧的轮播广告是哪个联盟的?

    • Surmon
      Surmon🇨🇳CNShanghaiMac OSChrome
      #1004

      reply:

      主站广告,非联盟