Incohérent avec l'ordre d'exécution des instructions wait

Question

J'ai rencontré un comportement inattendu dans la séquence d'exécution de mon code. Voici l'extrait de code :

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

Je m'attends à ce que l'ordre d'exécution soit 1,3,2. Cependant, lorsque j'exécute le code, l'ordre réel est 1,2,3. Quelqu'un peut-il expliquer pourquoi cela se produit ?

De plus, j'ai remarqué que lorsque j'ai modifié la fonction reloadScenarios pour inclure une instruction return avant getScenario(), l'ordre d'exécution est passé à 1, 3, 2 - qui est l'ordre souhaité. Ai-je vraiment besoin d'une instruction return ou existe-t-il une autre explication pour obtenir la séquence souhaitée ?

Answer 1

Votre problème est que vous utilisez wait pour appeler une fonction qui n'est pas asynchrone et ne renvoie pas de promesse. Puisque la fonction ne renvoie pas de promesse, l'exécution continue.

Si vous souhaitez que la séquence affichée soit "1,3 2" alors vous devez marquer votre fonction avec async

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

De cette façon, lorsque vous marquez await reloadScenarios, vous attendez que la promesse soit résolue (ou rejetée).

Pour plus de détails, consultez la documentation : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Modifier Désolé j'oubliais, encore un problème : il faut aussi retourner la promesse dans la fonction