JavaScriptawait详解：异步执行顺序解析

本文深入解析JavaScript中`await`关键字，旨在帮助开发者解决异步函数调用时，因`async`标记缺失或未返回Promise导致的执行顺序混乱问题。通过剖析`await`的工作原理，结合实际代码示例，阐述了如何确保异步操作按预期执行，避免常见的并发问题，提升代码的稳定性和可预测性。文章强调，`await`必须在`async`函数中使用，且`async`函数需返回Promise，以保证异步操作的正确执行顺序。掌握这些关键点，能有效避免因异步执行顺序错误而引发的程序异常，编写出更健壮的JavaScript代码。

本文深入探讨了JavaScript中`await`关键字的正确使用方式，重点解决在异步函数调用中因未正确标记函数为`async`或未返回Promise而导致的执行顺序不一致问题。通过详细解释其工作原理和提供修正后的代码示例，文章旨在帮助开发者确保异步操作按预期顺序执行，避免常见的并发陷阱，从而提升代码的可预测性和稳定性。

理解 await 关键字与异步执行流程

在JavaScript中，async/await 语法糖极大地简化了异步代码的编写，使其看起来更像同步代码。然而，不正确的使用方式可能导致出乎意料的执行顺序。一个常见的误解是，只要在一个函数调用前加上 await，就能够确保该函数内部的所有异步操作完成后再继续执行后续代码。实际上，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(transformedScenarios);
            })
            .catch((error) => {
                console.error('Failed to fetch scenario options:', error);
            });
    }
};

当执行这段代码时，预期的输出顺序可能是 1, 3, 2。然而，实际的输出却是 1, 2, 3。这种不一致的执行顺序表明 await reloadScenarios() 并没有等待 reloadScenarios 函数内部的异步操作完成。

为什么 await 没有生效？

await 关键字的核心作用是暂停一个 async 函数的执行，直到它所等待的 Promise 解决（fulfilled）或拒绝（rejected）。如果 await 后面的表达式不是一个 Promise，JavaScript 会将其立即解析为一个已解决的 Promise。

在上述示例中，reloadScenarios 函数存在两个关键问题：

1. 它不是一个 async 函数： await 只能在 async 函数内部使用。虽然我们在全局上下文（或另一个 async 函数）中 await 了 reloadScenarios，但 reloadScenarios 本身是一个普通的同步函数。
2. 它没有返回一个 Promise： 即使 reloadScenarios 内部调用了 getScenario() 这个可能返回 Promise 的函数，但 reloadScenarios 函数体本身并没有将这个 Promise 返回。因此，当 reloadScenarios() 被调用时，它会立即执行，并返回 undefined（因为没有显式返回任何值）。

由于 reloadScenarios() 返回 undefined，await 关键字会立即将 undefined 解析为一个已解决的 Promise，并允许程序继续执行 console.log("2")。而 getScenario().then(...) 中的异步回调（打印 3）则会在后台继续执行，并在稍后完成。

解决方案：标记函数为 async 并返回 Promise

要实现预期的 1, 3, 2 执行顺序，需要对 reloadScenarios 函数进行两处关键修改：

1. 将函数标记为 async

使用 async 关键字修饰函数，使其成为一个异步函数。一个 async 函数总是隐式地返回一个 Promise。

const reloadScenarios = async () => {
    // ... 函数体 ...
};

当一个函数被标记为 async 后，await reloadScenarios() 就会等待这个由 async 函数隐式返回的 Promise。

2. 确保 async 函数返回其内部的 Promise

即使函数被标记为 async，如果它内部的异步操作（如 getScenario() 返回的 Promise）没有被 return 语句传递出去，那么 async 函数可能会在内部 Promise 解决之前就返回一个已解决的 Promise。为了让外部的 await 真正等待到内部的异步操作完成，我们需要显式地返回内部的 Promise。

const reloadScenarios = 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);
                // 捕获错误后，可以重新抛出错误，或者返回一个拒绝的Promise
                // 或者返回一个已解决的Promise，取决于错误处理策略
                throw error; // 重新抛出错误，以便外部 await 也能捕获
            });
    }
    // 如果 token 不存在，也应该返回一个 Promise，例如一个已解决的 Promise
    return Promise.resolve();
};

通过这两处修改，reloadScenarios 现在是一个真正的异步函数，并且它返回的 Promise 会在其内部的 getScenario() 及其 then / catch 链完成时才会被解决或拒绝。这样，外部的 await reloadScenarios() 就能正确地暂停执行，直到 console.log("3") 完成，然后才会继续执行 console.log("2")，从而得到预期的 1, 3, 2 顺序。

修正后的完整代码示例

// 假设 token 和 getScenario(), setOptions() 已定义
let token = 'some-token'; // 示例 token
const getScenario = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ scenarios: [{ name: 'Scenario A', categories: { name: 'Category X' }, _id: 'id1' }] });
        }, 500); // 模拟异步请求
    });
};
const setOptions = (options) => {
    console.log("Set options:", options);
};

const reloadScenarios = async () => {
    if (token) {
        try {
            // 显式返回 Promise，确保外部 await 等待
            const { scenarios } = await getScenario(); // 也可以在这里直接 await
            console.log("3");

            const transformedScenarios = scenarios.map(option => ({
                scenario: option.name,
                description: option.categories.name,
                value: option._id
            }));
            setOptions(transformedScenarios);
            return transformedScenarios; // 返回处理后的数据
        } catch (error) {
            console.error('Failed to fetch scenario options:', error);
            throw error; // 重新抛出错误，让外部 await 的 try...catch 捕获
        }
    }
    // 如果 token 不存在，返回一个已解决的 Promise，避免 await 挂起
    return Promise.resolve([]);
};

// 在一个 async 函数中调用 reloadScenarios
(async () => {
    console.log("1");
    try {
        await reloadScenarios();
        console.log("2");
    } catch (error) {
        console.error("Error during reloadScenarios:", error);
    }
})();

关键点与最佳实践

• await 必须在 async 函数中使用： 这是一个语法规定。
• async 函数总是返回一个 Promise： 即使你没有显式地 return Promise.resolve() 或 Promise.reject()，async 函数也会将其返回值包装在一个 Promise 中。
• 确保 async 函数返回其内部的关键 Promise： 如果 async 函数内部有多个异步操作，并且你希望外部的 await 等待特定的异步操作完成，请确保该操作返回的 Promise 最终被 return 语句传递出去。
• 错误处理： 在 async/await 中，可以使用 try...catch 块来处理 Promise 被拒绝的情况，这比 .catch() 链更具可读性。
• 默认返回值： 当异步操作不满足条件时（例如本例中 token 不存在），确保 async 函数依然返回一个 Promise（例如 Promise.resolve() 或 Promise.reject()），以避免 await 接收到 undefined。

总结

正确理解和使用 async/await 对于编写可维护、可预测的异步 JavaScript 代码至关重要。核心在于：await 关键字仅在 async 函数内部有效，并且它会等待一个 Promise 的解决。要确保异步操作按预期顺序执行，必须将相关函数标记为 async，并确保这些 async 函数显式地返回它们所依赖的内部异步操作的 Promise。遵循这些原则，可以有效避免因执行顺序混乱而导致的程序行为异常。

今天关于《JavaScriptawait详解：异步执行顺序解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！