面试题：JavaScript 异步编程中的 Async/Await 与 Promise

Question

Async/Await 是基于 Promise 实现的语法糖，请阐述 Async/Await 相较于 Promise 的优势，并写出一个包含多个异步操作（至少三个），且其中有并行和串行混合的场景代码，使用 Async/Await 实现。同时说明如何捕获其中可能出现的错误。

Answer 1

Async/Await 相较于 Promise 的优势

1. 代码更简洁易读：Async/Await 以同步风格编写异步代码，避免了 Promise 链式调用中多层嵌套回调函数的“回调地狱”问题，使代码结构更清晰，更符合人类阅读习惯。
2. 错误处理更直观：在 Async/Await 中，可使用传统的 try...catch 块捕获错误，相比 Promise 的 .catch() 链式调用，错误捕获范围更明确，更易于理解和维护。

包含多个异步操作（并行和串行混合）的场景代码

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function parallelAndSerial() {
    try {
        // 并行操作
        const [result1, result2] = await Promise.all([
            delay(1000).then(() => '操作1完成'),
            delay(2000).then(() => '操作2完成')
        ]);
        console.log(result1, result2);

        // 串行操作
        const result3 = await delay(1500).then(() => '操作3完成');
        console.log(result3);

        return '所有操作完成';
    } catch (error) {
        console.error('发生错误:', error);
    }
}

parallelAndSerial();

错误捕获说明

在上述代码中，通过 try...catch 块捕获可能出现的错误。try 块中包含所有异步操作，若其中任何一个异步操作（无论是并行的 Promise.all 中的，还是串行的单独 await）抛出错误，都会被 catch 块捕获并处理。在 catch 块中，使用 console.error 打印错误信息，也可根据实际需求进行其他错误处理操作，如上报错误日志、显示友好提示等。