有一个新的API用于从JavaScript发出请求:fetch()。是否有任何内置的机制可以在飞行中取消这些请求?
fetch现在支持signal截至2017年9月20日的参数,但目前 并非所有浏览器似乎都支持此参数 。
fetch
signal
2020更新: 大多数主流浏览器(Edge,Firefox,Chrome,Safari,Opera和其他一些浏览器)都支持该功能,该功能已成为DOM生活标准的一部分。(截至2020年3月5日)
不过,这是我们很快就会看到的更改,因此您应该可以使用AbortControllers 取消请求AbortSignal。
AbortController
AbortSignal
它的工作方式是这样的:
第1步 :您创建了一个AbortController(现在我只使用了这个)
const controller = new AbortController()
步骤2 :您会收到AbortControllers信号,如下所示:
const signal = controller.signal
第3步 :您将传递signal方式如下:
fetch(urlToFetch, { method: 'get', signal: signal, // <------ This is our AbortSignal })
步骤4 :只要需要,就中止:
controller.abort();
这是一个工作原理示例(可在Firefox 57+上运行):
<script> // Create an instance. const controller = new AbortController() const signal = controller.signal /* // Register a listenr. signal.addEventListener("abort", () => { console.log("aborted!") }) */ function beginFetching() { console.log('Now fetching'); var urlToFetch = "https://httpbin.org/delay/3"; fetch(urlToFetch, { method: 'get', signal: signal, }) .then(function(response) { console.log(`Fetch complete. (Not aborted)`); }).catch(function(err) { console.error(` Err: ${err}`); }); } function abortFetching() { console.log('Now aborting'); // Abort. controller.abort() } </script> <h1>Example of fetch abort</h1> <hr> <button onclick="beginFetching();"> Begin </button> <button onclick="abortFetching();"> Abort </button>