内容简介:TLDR:As of today, there are two primary ways to make a request in the browser.
TLDR: AbortController
is used to abort a fetch request..
As of today, there are two primary ways to make a request in the browser. XMLHttpRequest
and fetch
. XMLHttpRequest
existed in browsers for a long time. the fetch
was introduced with ES6
.
XMLHttpRequest
was always abortable. An abortable XHR
request looks something like this.
let xhr = new XMLHttpRequest(); xhr.method = 'GET'; xhr.url = 'https://slowmo.glitch.me/5000'; xhr.open(method, url, true); xhr.send(); // Abort the request at a later stage abortButton.addEventListener('click', function() { xhr.abort(); });
fetch
wasn’t abortable when it was initially introduced. the initial GitHub issue for aborting a fetch request was opened initially in 2015. There were also many attempts to solve this problem outside of the fetch
spec like cancelable-promises and other hacks .
But, we now finally have the generic AbortController
and the AbortSignal
APIs. These APIs are provided by the DOM standard , not by the language itself.
What is an AbortController?
As described in the DOM spec documentation
Though promises do not have a built-in aborting mechanism, many APIs using them require abort semantics. AbortController
is meant to support these requirements by providing an abort()
method that toggles the state of a corresponding AbortSignal
object. The API which wishes to support aborting can accept an AbortSignal
object, and use its state to determine how to proceed.
// Create a instance of the AbortController const controller = new AbortController(); const signal = controller.signal; // Listen for abort signal, callback executed on controller.abort() signal.addEventListener('abort', () => { console.log(signal.aborted); // true }); // Abort at a later stage, this will notify the signal controller.abort();
How to abort fetch request using AbortController?
fetch
accepts AbortSignal
as part of the second argument.
const controller = new AbortController(); const signal = controller.signal; // API responds after 5s // Note the 'signal' in the second argument fetch('https://slowmo.glitch.me/5000', { signal }) .then(r => r.json()) .then(response => console.log(response)) .catch(err => { if (err.name === 'AbortError') { console.log('Fetch was aborted'); } else { console.error('Oops!', err); } }); // Abort the request after 2s // This will abort the fetch with 'AbortError' setTimeout(() => { controller.abort(); }, 2000);
Aborting the fetch
aborts both the request and response. The request fails with the error new DOMException('Aborted', 'AbortError')
.
The same AbortSignal
( signal
in the above example) can be used to abort multiple fetch
requests.
Demo
AbortController
is not only for fetch. it’s a generic API to abort asynchronous tasks. Eg: You can use it to implement a cancelable promise .
Browser support and polyfill
Many older browsers don’t support the AbortController
and the AbortSignal
APIs. You can use either of these polyfills to make it work.
https://www.npmjs.com/package/abort-controller https://www.npmjs.com/package/abortcontroller-polyfill
That’s it for now. If you enjoyed reading this post, give me a follow @ganapativs :grimacing:
References:
- https://developers.google.com/web/updates/2017/09/abortable-fetch
- https://github.com/whatwg/fetch/issues/27
Thanks:
以上所述就是小编给大家介绍的《Aborting a fetch request ????》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript & jQuery交互式Web前端开发
[美]达克特(Duckett,J.) / 杜伟、柴晓伟、涂曙光 / 清华大学出版社 / 2015-6-9 / 79.80元
欢迎选择一种更高效的学习JavaScript和jQuery的方式。 你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您。本书不仅向您展示如何阅读和编写JavaScript代码,同时还会以一种简单且视觉化的方式,教您有关计算机编程的基础知识。阅读本书之前,您只需要对HTML和CSS有一些了解即可。 通过将编程理论......一起来看看 《JavaScript & jQuery交互式Web前端开发》 这本书的介绍吧!