截至2017年9月20日,fetch
现在支持signal
参数,但支持not
all browsers seem support this at the moment参数.
2020 UPDATE:大多数主要浏览器(Edge、Firefox、Chrome、Safari、Opera等)support the feature,已成为the DOM living standard的一部分.(截至2020年3月5日)
不过,这是我们很快就会看到的变化,因此您应该可以使用AbortController
S AbortSignal
取消请求.
其工作方式如下:
Step 1:你创建了一个AbortController
(目前我只使用了this)
const controller = new AbortController()
Step 2:你会得到这样的AbortController
秒信号:
const signal = controller.signal
个
Step 3:通过signal
取数如下:
fetch(urlToFetch, {
method: 'get',
signal: signal, // <------ This is our AbortSignal
})
Step 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>