next.js await语句的执行顺序不一致

798qvoo8  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(98)

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

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语句吗?还是有其他的解释来实现所需的序列?

8nuwlpux

8nuwlpux1#

这里的问题是,你正在使用await来调用一个非异步的函数,它不返回Promise。因为函数没有返回Promise,所以继续执行。
如果你希望显示的序列是“1,32”,那么你必须用async标记你的函数

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

这样,当您标记await reloadScenarios时,您正在等待promise被解析(或被拒绝)。
有关详细信息,请参阅文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

编辑对不起,我忘了,还有一个问题:你还必须在函数中返回promise

相关问题