Web API：AbortController
紧张用途AbortController 是一个 Web API，紧张用于取消一个或多个 Web 请求（如 fetch 请求）或停止其他异步操纵。它提供了一种尺度化的方式来制止正在举行的操纵，特别是在以下情况下非常有效：
[*]用户离开页面或切换视图时取消未完成的网络请求
[*]实现超机遇制
[*]取消不再必要的长时间运行的操纵
[*]避免竞态条件（race conditions）
根本工作原理
AbortController 的工作原理基于以下组件：
[*]AbortController：控制器对象，用于创建中止信号并触发中止操纵
[*]AbortSignal：表示中止状态的信号对象，可以通报给支持中止的 API
根本用法示例
// 创建一个 AbortController 实例
const controller = new AbortController();
// 获取与控制器关联的信号
const signal = controller.signal;
// 使用 fetch API 并传入信号
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
// 当请求被中止时，错误类型为 AbortError
if (err.name === 'AbortError') {
console.log('Fetch request was aborted');
} else {
console.error('Fetch error:', err);
}
});
// 在需要时中止请求
// 例如：用户点击取消按钮、设置超时等
controller.abort();
高级用例
1. 实现请求超时
function fetchWithTimeout(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const { signal } = controller;
// 设置超时
const timeoutId = setTimeout(() => controller.abort(), timeout);
return fetch(url, { ...options, signal })
.then(response => {
clearTimeout(timeoutId);
return response;
})
.catch(err => {
clearTimeout(timeoutId);
throw err;
});
}
// 使用
fetchWithTimeout('https://api.example.com/data', {}, 3000)
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('Request timed out');
} else {
console.error(err);
}
});
2. 取消多个请求
const controller = new AbortController();
const { signal } = controller;
// 多个使用同一信号的请求
Promise.all([
fetch('/api/data1', { signal }),
fetch('/api/data2', { signal }),
fetch('/api/data3', { signal })
])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(dataArray => console.log(dataArray))
.catch(err => {
if (err.name === 'AbortError') {
console.log('All requests were aborted');
}
});
// 一次调用可以取消所有请求
controller.abort();
3. 与其他异步 API 一起使用
// 与 DOM API 一起使用
const controller = new AbortController();
const { signal } = controller;
document.addEventListener('mousemove', event => {
console.log(event.clientX, event.clientY);
}, { signal });
// 稍后取消事件监听
controller.abort();
浏览器支持
AbortController 在所有当代浏览器中得到广泛支持，包罗：
[*]Chrome 66+
[*]Firefox 57+
[*]Safari 12.1+
[*]Edge 16+
对于不支持的浏览器，可以使用 polyfill。
总结
AbortController 是一个强盛的 Web API，专门用于：
[*]取消举行中的网络请求
[*]制止不再必要的异步操纵
[*]实现请求超时逻辑
[*]防止竞态条件
[*]在用户交互变革时优雅地处理资源清理
它提供了一种尺度且优雅的方式来管理异步操纵的生命周期，特别是在单页应用步伐中，对于进步用户体验和资源利用效率非常紧张。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]