与await语句执行顺序不一致

Question

我在代码的执行序列中遇到了意外行为。这是代码片段：

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);
                // setSelectedOption(transformedScenarios[0]?.value || null);
            })
            .catch((error) => {
                console.error('Failed to fetch scenario options:', error);
            });
    }
};

我预计执行顺序是1,3,2。但是，当我运行代码时，实际顺序是1,2,3。有人可以解释一下为什么会发生这种情况吗？

此外，我注意到当我修改 reloadScenarios 函数以在 getScenario() 之前包含 return 语句时，执行顺序更改为 1, 3, 2 - 这是所需的顺序。我真的需要 return 语句，还是有其他解释来实现所需的序列？

Answer 1

您的问题是您正在使用await 来调用一个非异步且不返回Promise 的函数。由于该函数不返回 Promise，因此继续执行。

如果您希望显示的序列为“1,3 2”，那么您必须使用async标记您的函数

const reloadScenarios = async () => {
    // Your body function
};

这样，当您标记await reloadScenarios时，您正在等待承诺得到解决（或拒绝）。

有关更多详细信息，请参阅文档：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

编辑 抱歉，我忘了，还有一个问题：你还必须在函数中返回承诺