深入理解JavaScript中await的执行机制与正确使用姿势

本文深入探讨了javascript中`await`关键字的正确使用方法，解决了在异步函数中因未正确标记`async`和返回promise而导致的执行顺序不一致问题。通过详细的代码示例和解释，揭示了`await`仅在等待promise时才暂停执行的原理，并提供了两种关键的解决方案：将函数标记为`async`，以及确保函数返回一个promise，从而实现预期的同步化异步操作。

在现代JavaScript开发中，async/await语法极大地简化了异步代码的编写和阅读。然而，如果不完全理解其背后的机制，有时会导致出乎意料的执行顺序。本文将通过一个具体的案例，详细解析await的工作原理，并提供确保代码按预期执行的正确实践。

遇到的问题：await关键字的误解

考虑以下JavaScript代码片段，它尝试使用await来控制异步操作的执行顺序：

console.log("1");
await reloadScenarios();
console.log("2");

const reloadScenarios = () => {
    if (token) {
        getScenario()
            .then(({ scenarios }) => {
                console.log("3");

                const transformedScenarios = scenarios.map(option => ({
                    scenario: option.name,
                    description: option.categories.name,
                    value: option._id
                }));

                setOptions(transformedScformedScenarios);
                // setSelectedOption(transformedScenarios[0]?.value || null);
            })
            .catch((error) => {
                console.error('Failed to fetch scenario options:', error);
            });
    }
};

开发者期望的执行顺序是 1 -> 3 -> 2，即在 reloadScenarios 完成其内部的异步操作（打印 3）之后，再继续执行 console.log("2")。然而，实际的执行顺序却是 1 -> 2 -> 3。这表明 await reloadScenarios() 并没有如预期那样暂停代码的执行。

await的工作原理

await关键字只能在 async 函数内部使用，并且它的作用是暂停 async 函数的执行，直到它等待的 Promise 对象解决（resolved）或拒绝（rejected）。如果 await 后面的表达式不是一个 Promise，JavaScript 会将其立即解析为一个已解决的Promise，并继续执行。

立即学习“Java免费学习笔记（深入）”；

在上述问题代码中，reloadScenarios 函数本身是一个普通的同步函数，它没有被标记为 async，并且它也没有直接返回一个 Promise。尽管 reloadScenarios 内部调用了 getScenario().then(...) 这样的异步操作，但 reloadScenarios 函数在启动这些异步操作后会立即返回 undefined（因为没有显式的 return 语句）。

因此，当执行到 await reloadScenarios() 时，reloadScenarios() 立即执行并返回 undefined。await 关键字看到一个非 Promise 值 (undefined)，会将其视为一个已解决的Promise，并立即允许外部的 async 函数（假设这段代码在一个 async 函数中）继续执行 console.log("2")。之后，getScenario().then(...) 中的异步回调才会在事件循环中被执行，最终打印 3。

解决方案：确保await等待一个Promise

要实现期望的执行顺序 1 -> 3 -> 2，我们需要确保 await reloadScenarios() 确实在等待一个Promise，并且这个Promise会在 reloadScenarios 内部的所有异步操作完成后才解决。这可以通过两种主要方式实现：

1. 将函数标记为 async

最直接的方法是将 reloadScenarios 函数标记为 async。一个 async 函数总是会返回一个 Promise。如果 async 函数内部没有显式地返回一个 Promise，它会隐式地返回一个已解决的Promise，其值是函数内部的返回值（如果没有显式返回值，则为 undefined）。

console.log("1");
await reloadScenarios(); // 假设这段代码在一个 async 函数中
console.log("2");

const reloadScenarios = async () => { // 标记为 async
    if (token) {
        getScenario()
            .then(({ scenarios }) => {
                console.log("3");
                const transformedScenarios = scenarios.map(option => ({
                    scenario: option.name,
                    description: option.categories.name,
                    value: option._id
                }));
                setOptions(transformedScenarios);
            })
            .catch((error) => {
                console.error('Failed to fetch scenario options:', error);
            });
    }
};

然而，仅仅标记为 async 仍然不足以解决问题！ 尽管 reloadScenarios 现在返回一个Promise，但这个Promise会在 getScenario() 启动后立即解决，而不是在 getScenario().then(...) 中的回调执行后解决。因为 getScenario().then(...) 本身是一个异步操作，它不会阻塞 async 函数的同步部分执行。

为了让 async 函数的 Promise 在内部异步操作完成后才解决，我们需要采取第二个关键步骤。

Artbreeder

创建令人惊叹的插画和艺术

下载

2. 返回内部的Promise（或在内部 await）

为了让 async reloadScenarios 函数的 Promise 在 getScenario() 的 Promise 解决后才解决，我们需要在 reloadScenarios 函数内部显式地 return getScenario() 返回的 Promise。

完整且正确的实现：

// 假设这段代码在一个 async 函数中，例如：
async function main() {
    console.log("1");
    await reloadScenarios();
    console.log("2");
}

const reloadScenarios = async () => { // 标记为 async
    if (token) {
        // 关键：返回 getScenario() 返回的 Promise
        return getScenario()
            .then(({ scenarios }) => {
                console.log("3");

                const transformedScenarios = scenarios.map(option => ({
                    scenario: option.name,
                    description: option.categories.name,
                    value: option._id
                }));

                setOptions(transformedScenarios);
            })
            .catch((error) => {
                console.error('Failed to fetch scenario options:', error);
                // 确保错误也被传递，或者根据需要处理
                throw error; // 重新抛出错误，让外部的 await 能够捕获
            });
    }
    // 如果 token 不存在，也需要返回一个 Promise，例如一个已解决的 Promise
    return Promise.resolve(); 
};

// 调用主函数
// main(); 

在这个修正后的版本中：

1. reloadScenarios 被标记为 async，因此它总会返回一个Promise。
2. 在 if (token) 块内部，我们 return getScenario().then(...).catch(...)。这意味着 reloadScenarios 函数返回的Promise现在就是 getScenario() 链式操作的最终Promise。
3. 当 await reloadScenarios() 被调用时，它会等待 getScenario() 返回的Promise解决（或拒绝），这包括了 .then 回调中打印 3 的操作。只有当这个Promise解决后，console.log("2") 才会执行。

现在，执行顺序将是期望的 1 -> 3 -> 2。

替代方案：在 async 函数内部使用 await

另一种更符合 async/await 风格的写法是，在 async 函数 reloadScenarios 内部也使用 await 来等待 getScenario() 的结果：

async function main() {
    console.log("1");
    await reloadScenarios();
    console.log("2");
}

const reloadScenarios = async () => {
    if (token) {
        try {
            // 在 async 函数内部使用 await
            const { scenarios } = await getScenario(); 
            console.log("3");

            const transformedScenarios = scenarios.map(option => ({
                scenario: option.name,
                description: option.categories.name,
                value: option._id
            }));

            setOptions(transformedScenarios);
        } catch (error) {
            console.error('Failed to fetch scenario options:', error);
            throw error; // 重新抛出错误，让外部的 await 能够捕获
        }
    }
    // 如果 token 不存在，async 函数会隐式返回一个已解决的 Promise
};

// main();

这种写法更为简洁和直观，它同样确保了 async reloadScenarios 函数返回的Promise会在 await getScenario() 完成后才解决。

总结与最佳实践

要正确地使用 await 关键字并确保异步操作的执行顺序符合预期，请遵循以下关键原则：

1. await 必须在 async 函数中使用： 任何包含 await 的代码块都必须被一个 async 函数包裹。
2. await 等待的是 Promise： await 关键字仅在等待一个 Promise 对象时才会暂停 async 函数的执行。如果 await 后面跟着的不是 Promise，它会立即解析并继续执行。
3. async 函数隐式返回 Promise： 任何被标记为 async 的函数都会返回一个 Promise。这个Promise会解析为函数内部的返回值，或者在函数抛出错误时被拒绝。
4. 确保 async 函数返回的Promise反映内部异步操作的完成状态：
   • 如果 async 函数内部调用了其他异步操作（例如 fetch 或返回Promise的函数），并且你希望 async 函数的Promise在这些内部操作完成后才解决，那么你需要：
     • 在内部使用 await： await internalAsyncOperation();
     • 或者 return 内部异步操作的Promise： return internalAsyncOperation().then(...);
   • 避免在 async 函数中启动一个异步操作，但不 await 也不 return 它的Promise，否则 async 函数的Promise会过早地解决。

通过理解和应用这些原则，您可以有效地控制JavaScript中的异步流程，编写出更健壮、更易读的异步代码。