TL / DR:
fetch现在支持
signal截至2017年9月20日的参数,但目前 并非所有浏览器都支持此参数 。
2020更新:
大多数主流浏览器(Edge,Firefox,Chrome,Safari,Opera和其他一些浏览器)都支持该功能,该功能已成为DOM生活标准的一部分。(截至2020年3月5日)
这是我们很快就会看到的更改,因此您应该可以使用
AbortControllers 取消请求
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 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>资料来源:
- AbortController的最终版本已添加到DOM规范中
- 现在,将获取规范的相应PR合并。
- 跟踪AbortController的实现的浏览器错误可在此处找到:Firefox:#1378342; Chromium:#750599; WebKit:#174980; Edge:#13009916。



