Mengendalikan operasi asynchronous dengan cekap dan pengumpulan data dalam gelung di JavaScript

Artikel ini akan meneroka secara mendalam bagaimana untuk mengendalikan operasi tak segerak di dalam gelung di JavaScript dan mengumpul data yang dikembalikan oleh operasi ini dengan tepat. Dengan membandingkan potensi perangkap rantaian janji tradisional, kami akan memberi tumpuan kepada cara menggunakan sintaks async/menunggu bersempena dengan janji. Semua kaedah untuk memastikan bahawa semua tugas tak segerak berjaya diagregatkan dan dikembalikan sebagai respons API selepas selesai.

Memahami cabaran operasi tak segerak dalam gelung

Di JavaScript, kita sering menghadapi cabaran apabila kita perlu melakukan operasi tak segerak di dalam gelung (mis., Panggil fungsi yang mengembalikan janji) dan akhirnya mengumpul hasil semua operasi ini. Corak ralat biasa cuba mengumpul data dalam janji. Kemudian () panggil balik di dalam gelung dan mengharapkan untuk mengembalikan data ini dengan segera selepas gelung berakhir.

Pertimbangkan senario berikut: Kami mempunyai senarai pesanan yang perlu mendapatkan alamat e -mel mereka untuk pembeli setiap pesanan. MyListOrsFunction () dan MyGetMemberFunction () adalah kedua -dua fungsi asynchronous yang kembali janji.

 const myListOrdersFunction = memerlukan ('backend/test'). myListordersFunction;
const mygetMemberFunction = memerlukan ('backend/getMember'). MyGetMemberFunction;

$ w.onready (fungsi () {
    const emaillist = myListOrsFunction ()
        .THEN (LISTEDODERS => {
            const loginemails = [];
            untuk (perintah const of listedorders) {
                // Masalahnya terletak: MyGetMemberFunction mengembalikan janji,
                // Hasilnya hanya boleh digunakan selepas gelung berakhir MyGetMemberFunction (order.buyer.memberid)
                    .THEN (Ahli => {
                        loginemails.push (member.LogImail);
                    })
                    .catch (error => {
                        Console.error ("gagal mendapatkan maklumat ahli:", ralat);
                    });
            }
            // Pada masa ini, loginemail mungkin kosong, kerana janji dalaman belum diselesaikan kembali loginemails;
        })
        .catch (error => {
            Console.error ("gagal mendapatkan senarai pesanan:", ralat);
        });

    // Kod berikutnya cuba mengakses emaillist, tetapi mungkin janji yang tidak dapat diselesaikan,
    // atau mungkin walaupun ia diselesaikan, ia mungkin mengandungi array kosong.
    const printeMails = async () => {
        const a = menunggu emaillist;
        console.log ("a", a); // "a []" mungkin output
    }
    printeMails ();
});

Masalah dengan kod di atas ialah untuk ... gelung dilaksanakan secara serentak. Apabila gelung dilaksanakan ke MyGetMemberFunction (order.buyer.memberid) .tua (...), ia hanya memulakan operasi tak segerak dan mendaftarkan fungsi panggil balik, dan tidak menunggu operasi tak segerak selesai. Oleh itu, apabila gelung selesai, kembali Loginemails; Barisan kod ini akan dilaksanakan dengan serta -merta, dan array Loginemails mungkin masih kosong pada masa ini, kerana semua janji yang dikembalikan oleh MyGetMemberFunction masih menunggu di latar belakang untuk diselesaikan. Pada akhirnya, apabila janji emaillist diselesaikan, nilainya akan menjadi array kosong.

Penyelesaian: Async/menunggu dengan janji.all

Untuk mengendalikan senario ini dengan betul, kita memerlukan mekanisme untuk menunggu semua operasi tak segerak dalam gelung untuk diselesaikan sebelum mengumpul hasilnya secara seragam. Sintaks async/menunggu yang digabungkan dengan janji. Kaedah semua adalah amalan terbaik untuk menyelesaikan masalah ini.

1. Async/menunggu : Menyediakan cara yang lebih segerak dan boleh dibaca untuk menulis kod asynchronous, mengelakkan bersarang yang mendalam. THEN () Callbacks.
2. Janji.All : Menerima pelbagai janji dan mengembalikan janji baru. Janji baru ini akan diselesaikan selepas semua janji input diselesaikan, dan nilai resolusinya adalah array yang mengandungi semua nilai resolusi janji input (perintah itu selaras dengan perintah janji input). Sekiranya ada janji input gagal, janji yang dikembalikan oleh janji. Semua juga akan gagal dengan segera.

Berikut adalah penyelesaian yang dioptimumkan menggunakan async/menunggu dan janji. Semua:

 const myListOrdersFunction = memerlukan ('backend/test'). myListordersFunction;
const mygetMemberFunction = memerlukan ('backend/getMember'). MyGetMemberFunction;

// pastikan fungsi $ w.onready adalah fungsi async supaya menunggu digunakan di dalamnya
$ w.onready (fungsi async () {
    Cuba {
        // 1. Tunggu untuk mendapatkan senarai pesanan Const ListedOrders = menunggu MyListOrdersFunction ();

        // 2. Tukar ID Ahli setiap pesanan kepada janji yang memperoleh maklumat ahli
        // Gunakan peta untuk melintasi penyenaraian, buat janji myGetMemberfunction untuk setiap pesanan. Const MemberPromises = listedOrders.map (order => 
            MyGetMemberFunction (order.buyer.memberid)
        );

        // 3. Gunakan Janji.All untuk menunggu semua maklumat ahli untuk diambil // Janji.All akan mengembalikan array yang mengandungi semua objek anggota ahli const = menunggu janji.All (AhliPromises);

        // 4. Ekstrak semua alamat e -mel dari array objek ahli loginemails = ahli.map (ahli => ahli.loginemail);

        // 5. Kini Loginemail mengandungi peti mel semua ahli, dan anda boleh melakukan Operasi seterusnya Console.log ("Semua peti mel yang dikumpulkan:", Loginemails);

        // Dengan mengandaikan ini adalah pengendali tindak balas API, anda boleh mengembalikannya:
        // kembali ok ({
        // "E -mel": Loginemails
        //});

    } menangkap (ralat) {
        // Unifiedly mengendalikan kemungkinan kesilapan konsol.error ("Ralat berlaku semasa pemprosesan:", ralat);
        // Dengan mengandaikan ini adalah pengendali tindak balas API, anda boleh mengembalikan ralat seperti ini:
        // Return ServerError (ralat);
    }
});

Penjelasan kod terperinci

1. $ w.onready (fungsi async () {...}); : Mengisytiharkan fungsi panggil balik Onready sebagai async supaya kita dapat menggunakan kata kunci menunggu di dalamnya.
2. const listedorders = menunggu myListOrsFunction (); : Kata kunci menunggu akan berhenti pelaksanaan fungsi async semasa sehingga janji yang dikembalikan oleh myListOrsFunction () diselesaikan. Setelah diselesaikan, hasilnya (senarai pesanan) diberikan kepada penyenaraian.
3. const MemberPromises = listedOrders.map (order => myGetMemberFunction (order.buyer.memberId)); : Ini adalah langkah utama. Kami menggunakan kaedah array.prototype.map () untuk melangkah ke atas array penyenaraian. Untuk setiap pesanan, kami memanggil MyGetMemberFunction (order.buyer.memberid). Perhatikan bahawa kami tidak menggunakan menunggu di sini kerana kami mahu panggilan myGetMemberfunction ini akan dilaksanakan secara serentak , dan bukannya secara serentak dilaksanakan satu demi satu. Kaedah peta akhirnya akan mengembalikan pelbagai janji yang dikembalikan oleh semua myGetMemberfunction.
4. ahli const = menunggu janji.All (AhliPromises); : Menunggu Janji.All (MemberPromises) akan berhenti pelaksanaan fungsi async sehingga semua janji dalam pelbagai Profromises diselesaikan. Apabila mereka semua diselesaikan, janji. Semua mengembalikan array baru yang mengandungi nilai resolusi setiap janji (iaitu, setiap objek ahli), dan perintah array baru ini selaras dengan perintah janji dalam array anggota.
5. const loginemails = ahli.map (ahli => ahli.loginemail); : Sekarang kita mempunyai pelbagai ahli yang mengandungi semua objek ahli, kita boleh menggunakan kaedah peta sekali lagi untuk dengan mudah mengekstrak loginemail semua ahli daripadanya dan dapatkan array loginemail akhir.
6. Pengendalian ralat (cuba ... menangkap) : Async/menunggu membuat ralat mengendalikan lebih intuitif. Mana -mana janji yang ditunggu -tunggu dalam fungsi async ditolak, ia akan ditangkap oleh cubaan ... menangkap blok, sama seperti pengecualian dalam kod segerak. Ini adalah ringkas daripada mengendalikan kesilapan dalam setiap .then (). Tangkap () rantai.

Nota dan amalan terbaik

• Concurrency : Kelebihan utama janji. Semua adalah bahawa ia dapat melaksanakan pelbagai janji secara serentak. Ini bermakna semua permintaan untuk mendapatkan maklumat ahli dikeluarkan hampir serentak, dan bukannya menghantar yang seterusnya selepas satu permintaan selesai, yang sangat meningkatkan kecekapan.
• Pengendalian Ralat : Janji.Ada adalah "semua atau tidak ada". Jika mana -mana janji dalam janji. Semua ditolak, janji yang dikembalikan oleh janji. Semua juga akan ditolak dengan segera dan hanya akan mengembalikan sebab pertama penolakan. Sekiranya anda perlu mengumpulkan semua hasil yang berjaya walaupun terdapat kegagalan separa, pertimbangkan untuk menggunakan janji.
• Pertimbangan Prestasi : Jika pelbagai penyenaraian sangat besar (contohnya, beribu -ribu), dan memulakan sejumlah besar permintaan rangkaian pada masa yang sama boleh menyebabkan tekanan pada pelayan atau menyebabkan limpahan memori penyemak imbas. Dalam kes ini, anda mungkin perlu melaksanakan had keserasian (contohnya, menggunakan P-Limit atau Baris Janji Kustom) untuk mengawal bilangan permintaan yang dibuat serentak.
• Kebolehbacaan : Async/Await sangat meningkatkan kebolehbacaan dan penyelenggaraan kod tak segerak, menjadikannya lebih dekat dengan aliran logik kod segerak.

Meringkaskan

Async/menunggu digabungkan dengan janji. Semua adalah corak yang kuat dan elegan ketika mengendalikan operasi tak segerak di dalam gelung dan mengumpul hasil dalam JavaScript. Ia bukan sahaja menyelesaikan keadaan perlumbaan dan ketidaksempurnaan data yang boleh menyebabkan rantaian janji tradisional, tetapi juga meningkatkan kebolehbacaan kod dan kemudahan pengendalian ralat melalui sintaks yang lebih jelas. Menguasai corak ini adalah penting untuk menulis kod asynchronous JavaScript moden yang cekap dan mantap.

Atas ialah kandungan terperinci Mengendalikan operasi asynchronous dengan cekap dan pengumpulan data dalam gelung di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!