IT评测·应用市场-qidao123.com技术社区

标题: Web API：AbortController [打印本页]

作者: 羊蹓狼 时间: 2025-4-11 14:24
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)