[javascript]取消异步请求

使用AbortController取消异步请求，比如xmlHttpRequest/fetch发起的请求。

const controller = new AbortController();
const signal = controller.signal;fetch('https://api.example.com/data', { signal }).then(response => response.json()).then(data => console.log(data)).catch(err => {if (err.name === 'AbortError') {console.log('请求被取消');} else {console.error('其他错误', err);}});// 3 秒后取消请求
setTimeout(() => {controller.abort();
}, 3000);

同时abortController不仅仅只是用来取消异步请求，它还可以用来取消addEventListener事件监听，再也不需要通过removeEventListener来取消监听了，省的每次还得保留回调函数引用来移除监听器，直接一步到位使用abort取消

const controller = new AbortController();
const signal = controller.signal;document.addEventListener('click', () => {console.log('点击了页面');
}, { signal });// 5 秒后自动移除监听器
setTimeout(() => {controller.abort();console.log('事件监听器已取消');
}, 5000);

取消定时任务或者其他异步逻辑等

async function doSomething(signal) {await new Promise((resolve, reject) => {const id = setTimeout(resolve, 5000);signal.addEventListener('abort', () => {clearTimeout(id);reject(new DOMException('Aborted', 'AbortError'));});});
}

AbortController MDN