AbortController 是DOM规范的一部分(注意不是JS),用来中止一个或多个DOM请求。 DOM请求可以是Promise或fetch等。
注意:Chrome 66开始支持AbortController
。
中断Promise
创建AbortController
的一个实例,并将其signal
传递给Promise
。
const controller = new AbortController();
const signal = controller.signal;
doSomethingAsync({ signal })
.then(result => {
console.log(result);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('Promise Aborted');
} else {
console.log('Promise Rejected');
}
});
在实际的Promise
中,你会监听到该abort
事件被取消的信号,而Promise
将被取消。
function doSomethingAsync({signal}) {
if (signal.aborted) return Promise.reject(new DOMException('Aborted', 'AbortError'));
return new Promise((resolve, reject) => {
console.log('Promise Started');
const timeout = window.setTimeout(resolve, 2500, 'Promise Resolved')
// Listen for abort event on signal
signal.addEventListener('abort', () => {
window.clearTimeout(timeout);
reject(new DOMException('Aborted', 'AbortError'));
});
});
}
我们可以通过调用controller.abort();
在任何地方中止Promise。
中断Fetch
将signal
传递给fetch
,同样可以通过controller.abort();
中止fetch
。
fetch(url, {signal})
.then((response) => {
// Do something with the response
updateAutocompleteMenu()
})
.catch((err) => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('error:', err);
}
})
});
参考文章: Abortable fetch Cancel a JavaScript Promise with AbortController