面试题：JavaScript中async/await与错误处理及性能优化

Question

在一个大型JavaScript项目中，有多个相互依赖的异步任务，使用async和await进行管理。当其中某个异步任务出错时，不仅要捕获错误并进行适当处理，还要确保其他未执行的任务能够被优雅地取消以避免资源浪费和性能问题。请描述你会如何设计这样的异步任务管理机制，并提供关键部分的代码示例。

Answer 1

设计思路

1. 使用try - catch捕获错误：在async函数内部，使用try - catch块来捕获await表达式可能抛出的错误。
2. 任务取消机制：利用AbortController和AbortSignal来实现任务取消。每个异步任务接受一个AbortSignal实例，当接收到取消信号时，任务可以提前终止。

关键代码示例

// 创建一个模拟异步任务
function asyncTask(signal, taskName) {
    return new Promise((resolve, reject) => {
        const timeout = setTimeout(() => {
            if (signal.aborted) {
                reject(new Error('Task cancelled'));
            } else {
                resolve(`Task ${taskName} completed`);
            }
        }, 1000);

        signal.addEventListener('abort', () => {
            clearTimeout(timeout);
            reject(new Error('Task cancelled'));
        });
    });
}

async function main() {
    const controller = new AbortController();
    const signal = controller.signal;

    try {
        const tasks = [
            asyncTask(signal, 'A'),
            asyncTask(signal, 'B'),
            asyncTask(signal, 'C')
        ];

        const results = await Promise.all(tasks);
        console.log(results);
    } catch (error) {
        console.error('An error occurred:', error.message);
        controller.abort(); // 取消其他未执行的任务
    }
}

main();

在上述代码中：

1. asyncTask函数模拟了一个异步任务，接受AbortSignal实例作为参数。如果在任务执行过程中接收到取消信号，任务会被取消并抛出错误。
2. main函数中，使用Promise.all来并行执行多个异步任务。通过try - catch块捕获可能出现的错误，一旦捕获到错误，使用controller.abort()来取消其他未执行的任务。