await 关键字的作用是什么？

推荐答案

await 关键字用于暂停异步函数的执行，直到一个 Promise 对象被解决（即 Promise 状态变为 fulfilled 或 rejected）。它只能在 async 函数内部使用。当 await 后面的 Promise 被解决时，await 表达式会返回 Promise 的解决值。如果 Promise 被拒绝，await 会抛出拒绝的原因。

本题详细解读

1. await 的基本用法

await 关键字通常与 Promise 一起使用，用于等待 Promise 的解决。它的语法如下：

const result = await promise;

• promise 是一个 Promise 对象。
• result 是 promise 解决后的值。

2. await 的执行流程

当 await 表达式被执行时，它会暂停当前 async 函数的执行，直到 Promise 被解决。在此期间，JavaScript 引擎可以执行其他代码（如事件循环中的其他任务）。一旦 Promise 被解决，async 函数会从暂停的地方继续执行，并返回 Promise 的解决值。

3. await 与 Promise 的关系

await 实际上是 Promise 的语法糖，它使得异步代码的编写更加直观和易于理解。以下是一个使用 await 的示例：

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}

在这个例子中，fetchData 函数会等待 fetch 请求完成，然后等待 response.json() 完成，最后返回解析后的数据。

4. await 的错误处理

如果 await 后面的 Promise 被拒绝，await 会抛出拒绝的原因。为了处理这种情况，通常使用 try...catch 语句：

// www.javascriptcn.com code example
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

5. await 的限制

• await 只能在 async 函数内部使用。如果在非 async 函数中使用 await，会导致语法错误。
• await 不能用于顶层代码（即不在任何函数内部），除非使用 top-level await（在某些环境中支持）。

6. await 的性能考虑

虽然 await 使得异步代码更易于编写和理解，但它可能会导致性能问题，特别是在需要并行执行多个异步操作时。在这种情况下，可以考虑使用 Promise.all 来并行执行多个 Promise：

async function fetchMultipleData() {
    const [data1, data2] = await Promise.all([
        fetch('https://api.example.com/data1').then(response => response.json()),
        fetch('https://api.example.com/data2').then(response => response.json())
    ]);
    return { data1, data2 };
}

这样可以避免不必要的等待，提高代码的执行效率。