Widerspricht der Ausführungsreihenfolge von Wait-Anweisungen

Question

Ich habe in der Ausführungssequenz meines Codes ein unerwartetes Verhalten festgestellt. Hier ist der Codeausschnitt:

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);
            });
    }
};

Ich erwarte, dass die Ausführungsreihenfolge 1,3,2 ist. Wenn ich jedoch den Code ausführe, ist die tatsächliche Reihenfolge 1,2,3. Kann jemand erklären, warum das passiert?

Außerdem ist mir aufgefallen, dass sich die Ausführungsreihenfolge in 1, 3, 2 geändert hat, als ich die Funktion reloadScenarios so geändert habe, dass sie vor getScenario() eine Return-Anweisung enthält – was die gewünschte Reihenfolge ist. Benötige ich wirklich eine Return-Anweisung oder gibt es eine andere Erklärung, um die gewünschte Reihenfolge zu erreichen?

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

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