东莞网络_html网页制作视频_aso优化分析_国内好的seo网站

时间:2025/7/13 0:27:47来源：https://blog.csdn.net/wscfan/article/details/146040958 浏览次数:0次

AbortController 教程

1. 什么是 AbortController？

AbortController 是一个现代 Web API，提供了一种简单而强大的方式来取消一个或多个异步操作，特别是在处理网络请求时。它允许你在需要时主动终止正在进行的异步任务，从而提高应用程序的性能和用户体验。

2. AbortController 的基本用法

2.1 创建 AbortController

创建 AbortController 非常简单：

const controller = new AbortController();
const signal = controller.signal;

signal 是一个与 AbortController 实例相关联的对象，可以传递给支持中止的 API。

2.2 取消 Fetch 请求

最常见的使用场景是中止 fetch 请求：

async function fetchWithTimeout(url, timeout = 5000) {const controller = new AbortController();const signal = controller.signal;// 设置超时定时器const timeoutId = setTimeout(() => controller.abort(), timeout);try {const response = await fetch(url, { signal });clearTimeout(timeoutId);return await response.json();} catch (error) {if (error.name === 'AbortError') {console.log('请求被中止');} else {console.error('请求失败', error);}}
}

3. 高级使用场景

3.1 中止多个相关请求

可以使用同一个 AbortController 中止多个相关的异步操作：

const controller = new AbortController();
const signal = controller.signal;Promise.all([fetch('/api/data1', { signal }),fetch('/api/data2', { signal }),fetch('/api/data3', { signal })
]).catch(error => {if (error.name === 'AbortError') {console.log('所有请求已被中止');}
});// 在需要的时候中止所有请求
controller.abort();

3.2 与其他异步操作配合

AbortController 不仅限于 fetch，还可以与其他支持 signal 的 API 一起使用：

function longRunningTask(signal) {return new Promise((resolve, reject) => {const intervalId = setInterval(() => {// 执行一些耗时操作console.log('正在执行任务...');}, 1000);signal.addEventListener('abort', () => {clearInterval(intervalId);reject(new DOMException('任务被中止', 'AbortError'));});});
}const controller = new AbortController();
const signal = controller.signal;longRunningTask(signal).then(result => console.log(result)).catch(error => {if (error.name === 'AbortError') {console.log('长时间任务已中止');}});// 中止任务
controller.abort();