AbortController 教程

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();

4. 注意事项

• AbortController 只能中止一次。一旦调用 abort()，后续再调用将无效。
• 并非所有 API 都支持 AbortController，使用前请确认。
• fetch 和某些现代 API（如 addEventListener）原生支持 AbortController。

5. 浏览器兼容性

大多数现代浏览器都支持 AbortController，但在使用时请检查兼容性：

• Chrome: 66+
• Firefox: 57+
• Safari: 11.1+
• Edge: 16+

对于旧版浏览器，可以考虑使用 polyfill 或替代方案。

结论

AbortController 是一个强大的 Web API，让开发者能够更精细地控制异步操作。通过提供中止机制，它帮助改善性能、节省资源，并提升用户体验。