JavaScript的 Promise 一直是该语言的一大胜利——它带来了异步编码的革命,极大地改善了web上的性能。原生 Promise 的一个缺点是,没有一种真正的方法可以取消 fetch...直到现在。JavaScript规范中添加了一个新的 AbortController,允许开发人员使用一个信号来中止一个或多个 fetch 调用。
![2a1344dfaf02b2699d07037a3de6737e.png](https://i-blog.csdnimg.cn/blog_migrate/6b9428e5aa84c871c63f81286f3a09ff.jpeg)
以下是取消 fetch 调用的工作流程:
- 创建一个 AbortController 实例
- 该实例具有 signal(信号)属性
- 将 signal 作为 fetch 的选项传递
- 调用 AbortController 的 abort属性来取消使用该信号的所有读取。
中止 Fetch
以下是取消 fetch 请求的基本步骤:
const controller = new AbortController();const { signal } = controller;fetch("http://localhost:8000", { signal }).then(response => { console.log(`Request 1 is complete!`);}).catch(e => { console.warn(`Fetch 1 error: ${e.message}`);});// 终止请求controller.abort();
在调用 abort 时发生 AbortError,因此您可以通过比较错误名称来监听 catch中 的aborted fetches:
}).catch(e => { if(e.name === "AbortError") { // 我们知道已经取消了! }});
将相同的信号传递给多个 fetch 调用将会取消所有使用该信号的请求:
const controller = new AbortController();const { signal } = controller;fetch("http://localhost:8000", { signal }).then(response => { console.log(`Request 1 is complete!`);}).catch(e => { console.warn(`Fetch 1 error: ${e.message}`);});fetch("http://localhost:8000", { signal }).then(response => { console.log(`Request 2 is complete!`);}).catch(e => { console.warn(`Fetch 2 error: ${e.message}`);});// 等待2秒以中止两个请求setTimeout(() => controller.abort(), 2000);
一个创建可中止的 fetch 的一个不错的实用程序,无需所有样板:
function abortableFetch(request, opts) { const controller = new AbortController(); const signal = controller.signal; return { abort: () => controller.abort(), ready: fetch(request, { ...opts, signal }) };}
说实话,我并不超级兴奋取消请求的方法。在理想的情况下,对于 fetch返回的 Promise 使用一个基本的 .cancel() 会很酷,但是也会带来一些问题。无论如何,我对能够取消fetch 调用感到兴奋,你也应该如此!
感谢阅读。
本头条号聚焦大前端技术和程序员成长,如果对你有所启发和帮助,可以点个关注、收藏。
作者简介:同名微信公众号作者,Web前端工程师,全栈开发工程师、持续学习者。
现在关注做同名微信公众号,送精品视频视频教程大礼包!
#JavaScript WEB前端开发# #每日学习JavaScript# #JavaScript#