Tidak konsisten dengan perintah pelaksanaan kenyataan menunggu

Question

Saya menghadapi tingkah laku yang tidak dijangka dalam urutan pelaksanaan kod saya. Berikut ialah coretan kod:

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

Saya menjangkakan perintah pelaksanaan ialah 1,3,2. Walau bagaimanapun, apabila saya menjalankan kod, susunan sebenar ialah 1,2,3. Bolehkah seseorang menjelaskan mengapa ini berlaku?

Selain itu, saya perasan bahawa apabila saya mengubah suai fungsi reloadScenarios untuk memasukkan penyata pulangan sebelum getScenario(), perintah pelaksanaan bertukar kepada 1, 3, 2 - iaitu susunan yang diingini. Adakah saya benar-benar memerlukan penyata pulangan, atau adakah terdapat penjelasan lain untuk mencapai urutan yang dikehendaki?

Answer 1

Masalah anda ialah anda menggunakan await untuk memanggil fungsi yang tidak segerak dan tidak mengembalikan Janji. Oleh kerana fungsi tidak mengembalikan Janji, pelaksanaan diteruskan.

Jika anda mahu urutan yang dipaparkan menjadi "1,3 2" maka anda mesti menandakan fungsi anda dengan async

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

Dengan cara ini, apabila anda menanda await reloadScenarios, anda sedang menunggu janji untuk diselesaikan (atau ditolak).

Untuk butiran lanjut, lihat dokumentasi: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Edit Maaf, saya terlupa, satu lagi masalah: anda juga mesti mengembalikan janji dalam fungsi