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 也可能会永远处于无响应状态
结构图:
缺陷是当你 abort 之后,你的 Promise 可能永远不会有响应,而且不会被释放...
结
- abort -> abort(Fetch)
- abort -> Promise.race[Promise.reject(), fetch()]
- (abort -> aborted) ? Promise.reject() : fetch()
这不是取消 Promise 的问题,而是终止 Fetch 终止 HTTP 的问题,除了原生的 AbortController,不会有更优秀的办法可以做到。
完了。
想问下站长,右侧的轮播广告是哪个联盟的?
reply:
主站广告,非联盟
💪💪