Mengapa Async/Menunggu Peringkat Atas dalam JavaScript Menghadirkan Cabaran, dan Bagaimana Ia Boleh Diatasi?

Menggunakan Async/Await at the Top Level

Dalam pengaturcaraan JavaScript, async/wait membenarkan kod tak segerak dilaksanakan dalam bentuk seperti segerak cara. Walau bagaimanapun, kesukaran boleh timbul apabila menggunakan async/menunggu di peringkat atas, di mana tingkah laku tertentu mungkin kelihatan berlawanan dengan intuitif. Mari kita selidiki sebab mengapa async/menunggu peringkat atas boleh memberikan cabaran.

Memahami Gelagat

Secara lalai, semua fungsi async mengembalikan janji. Dalam coretan kod yang anda berikan:

async function main() {  
    var value = await Promise.resolve('Hey there');
    console.log('inside: ' + value);
    return value;
}

var text = main();  
console.log('outside: ' + text);

Output konsol mendedahkan bahawa mesej di dalam fungsi async dilaksanakan selepas mesej log di luar fungsi. Ini berlaku kerana fungsi utama mengembalikan janji, bukan nilai yang diselesaikan. Akibatnya, konsol merekodkan objek janji dan bukannya nilai yang diselesaikan.

Mengatasi Cabaran

Untuk menggunakan async/menunggu dengan berkesan di peringkat teratas, anda boleh gunakan strategi berikut:

1. Menunggu Tahap Atas dalam Modul (Cadangan)

Dengan cadangan ini, anda boleh menggunakan await secara langsung di peringkat teratas modul. Walau bagaimanapun, pemuatan modul anda akan disekat sehingga janji yang ditunggu-tunggu diselesaikan.

2. Fungsi Async Peringkat Atas Yang Tidak Pernah Menolak

Anda boleh mencipta fungsi async peringkat atas yang tidak pernah menolak. Dalam kes ini, kod di dalam blok async akan sentiasa dilaksanakan, tetapi anda mesti mempertimbangkan untuk mengendalikan kemungkinan pengecualian atau ralat.

3. Menggunakan .then() dan .catch()

Pendekatan ini membolehkan anda mengendalikan janji yang dikembalikan oleh fungsi async secara eksplisit. Anda boleh menggunakan .then() untuk mengendalikan pemenuhan dan .catch() untuk mengendalikan penolakan.

Contoh Pelaksanaan

Penantian Peringkat Atas dalam Modul

// This requires the top-level await proposal
const text = await main();
console.log(text);

Fungsi Async Peringkat Atas Yang Tidak Pernah Menolak

(async () => {
    try {
        const text = await main();
        console.log(text);
    } catch (e) {
        // Handle the exception
    }
})();

Menggunakan .then() dan .catch()

main()
    .then(text => {
        console.log(text);
    })
    .catch(err => {
        console.error('Error:', err);
    });

Dengan menggunakan teknik ini, anda boleh menggunakan async/menunggu dengan berkesan di peringkat teratas, memastikan kod anda dilaksanakan seperti yang dimaksudkan sambil mengendalikan kemungkinan pengecualian dan ralat.

Atas ialah kandungan terperinci Mengapa Async/Menunggu Peringkat Atas dalam JavaScript Menghadirkan Cabaran, dan Bagaimana Ia Boleh Diatasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!