如何取消HTTP提取()请求?

有一个新的API用于从JavaScript获取请求:fetch()。 有没有内置机制来取消这些在飞行中的请求?

我不相信有一种方法来取消现有的提取API的请求。 目前在https://github.com/whatwg/fetch/issues/27上正在进行讨论;

2017年5月更新:仍然没有解决scheme。 请求不能被取消。 更多的讨论在https://github.com/whatwg/fetch/issues/447

https://developers.google.com/web/updates/2017/09/abortable-fetch

build立:

const controller = new AbortController(); const signal = controller.signal; fetch(url, { signal }).then(response => { return response.text(); }).then(text => { console.log(text); }); 

中止: controller.abort()

在Firefox中工作); v57和更高版本。

至于现在还没有合适的解决scheme,正如@spro所说。

但是,如果您有正在使用的响应并正在使用ReadableStream,则可以closuresstream以取消请求。

 fetch('http://example.com').then((res) => { const reader = res.body.getReader(); /* * Your code for reading streams goes here */ // To abort/cancel HTTP request... reader.cancel(); }); 

TL / DR:

截至2017年9月20日, fetch现在支持一个signal参数,但并不是所有的浏览器都支持这个atm

这是一个我们很快就会看到的改变,所以你应该可以通过使用AbortControllerAbortSignal来取消请求。

长版本

如何:

它的工作方式是这样的:

第1步 :你创build一个AbortController (现在我只是用这个 )

const controller = new AbortController()

第二步 :你得到这样的AbortController的信号:

const signal = controller.signal

第三步 :你传递signal来取得像这样:

 fetch(urlToFetch, { method: 'get', signal, // <------ Our AbortSignal }) 

第四步 :只要你需要放弃:

controller.abort();

这是一个如何工作的例子:

 <script src="mysticatea/abort-controller/master/dist/abort-controller.umd.js"></script> <script> const { AbortController } = window.AbortControllerShim // 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://slowwly.robertomurray.co.uk/delay/3000/url/https://code.jquery.com/jquery-3.2.1.min.js"; fetch(urlToFetch, { method: 'get', 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>