使用 AbortController 中断DOM请求

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