Web API：AbortController

紧张用途

AbortController 是一个 Web API，紧张用于取消一个或多个 Web 请求（如 fetch 请求）或停止其他异步操纵。它提供了一种尺度化的方式来制止正在举行的操纵，特别是在以下情况下非常有效：

• 用户离开页面或切换视图时取消未完成的网络请求
  
• 实现超机遇制
  
• 取消不再必要的长时间运行的操纵
  
• 避免竞态条件（race conditions）
  

根本工作原理

AbortController 的工作原理基于以下组件：

• AbortController：控制器对象，用于创建中止信号并触发中止操纵
  
• AbortSignal：表示中止状态的信号对象，可以通报给支持中止的 API
  

根本用法示例

1. // 创建一个 AbortController 实例
2. const controller = new AbortController();
4. // 获取与控制器关联的信号
5. const signal = controller.signal;
7. // 使用 fetch API 并传入信号
8. fetch('https://api.example.com/data', { signal })
9.   .then(response => response.json())
10.   .then(data => console.log(data))
11.   .catch(err => {
12.     // 当请求被中止时，错误类型为 AbortError
13.     if (err.name === 'AbortError') {
14.       console.log('Fetch request was aborted');
15.     } else {
16.       console.error('Fetch error:', err);
17.     }
18.   });
20. // 在需要时中止请求
21. // 例如：用户点击取消按钮、设置超时等
22. controller.abort();

复制代码

高级用例

1. 实现请求超时

1. function fetchWithTimeout(url, options = {}, timeout = 5000) {
2.   const controller = new AbortController();
3.   const { signal } = controller;
4.   
5.   // 设置超时
6.   const timeoutId = setTimeout(() => controller.abort(), timeout);
7.   
8.   return fetch(url, { ...options, signal })
9.     .then(response => {
10.       clearTimeout(timeoutId);
11.       return response;
12.     })
13.     .catch(err => {
14.       clearTimeout(timeoutId);
15.       throw err;
16.     });
17. }
19. // 使用
20. fetchWithTimeout('https://api.example.com/data', {}, 3000)
21.   .then(response => response.json())
22.   .then(data => console.log(data))
23.   .catch(err => {
24.     if (err.name === 'AbortError') {
25.       console.log('Request timed out');
26.     } else {
27.       console.error(err);
28.     }
29.   });

复制代码

2. 取消多个请求

1. const controller = new AbortController();
2. const { signal } = controller;
4. // 多个使用同一信号的请求
5. Promise.all([
6.   fetch('/api/data1', { signal }),
7.   fetch('/api/data2', { signal }),
8.   fetch('/api/data3', { signal })
9. ])
10. .then(responses => Promise.all(responses.map(r => r.json())))
11. .then(dataArray => console.log(dataArray))
12. .catch(err => {
13.   if (err.name === 'AbortError') {
14.     console.log('All requests were aborted');
15.   }
16. });
18. // 一次调用可以取消所有请求
19. controller.abort();

复制代码

3. 与其他异步 API 一起使用

2. // 与 DOM API 一起使用
3. const controller = new AbortController();
4. const { signal } = controller;
6. document.addEventListener('mousemove', event => {
7.   console.log(event.clientX, event.clientY);
8. }, { signal });
10. // 稍后取消事件监听
11. controller.abort();

复制代码

浏览器支持

AbortController 在所有当代浏览器中得到广泛支持，包罗：

• Chrome 66+
  
• Firefox 57+
  
• Safari 12.1+
  
• Edge 16+
  

对于不支持的浏览器，可以使用 polyfill。
总结

AbortController 是一个强盛的 Web API，专门用于：

• 取消举行中的网络请求
  
• 制止不再必要的异步操纵
  
• 实现请求超时逻辑
  
• 防止竞态条件
  
• 在用户交互变革时优雅地处理资源清理
  

它提供了一种尺度且优雅的方式来管理异步操纵的生命周期，特别是在单页应用步伐中，对于进步用户体验和资源利用效率非常紧张。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。