Bagaimana untuk Mencapai Rantaian Asynchronous dengan Janji dalam JavaScript?

Asynchronous Chaining with Promises in JavaScript ES6

Coretan kod JavaScript menyediakan percubaan untuk mencipta janji dalam satu gelung, tetapi gagal disebabkan oleh segerak sifat gelung. Untuk menangani perkara ini, kami menghendaki setiap janji dibuat dan diselesaikan secara berurutan, mengakibatkan tak segerak.

Terdapat beberapa pendekatan untuk mencapai rantaian ini:

Menggunakan Gelung Untuk dengan Janji Permulaan:

Mulakan janji yang akan diselesaikan serta-merta, kemudian rantai janji baharu pada permulaan ini satu apabila setiap janji sebelumnya diselesaikan.

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));
}

Menggunakan Array.reduce dengan Janji Awal:

Sama seperti pendekatan gelung untuk, gunakan Array.reduce kepada rantai janji, bermula dengan janji awal.

[...Array(10).keys()].reduce(
    (p, i) => p.then(() => delay(Math.random() * 1000)).then(() => console.log(i)),
    Promise.resolve()
);

Menggunakan Rantaian Rekursif Fungsi:

Tentukan fungsi yang memanggil dirinya sebagai panggilan balik resolusi (seperti rantai janji), menghantar indeks semasa sebagai hujah.

const chainPromises = (i = 0) => {
    if (i >= 10) return;

    delay(Math.random() * 1000).then(() => {
        console.log(i);
        chainPromises(i + 1);
    });
};

chainPromises();

Menggunakan Async /Await (ES2017):

Gunakan async/wait untuk menjeda pelaksanaan berfungsi sehingga janji selesai.

const asyncPromises = async () => {
    for (let i = 0; i < 10; i++) {
        await delay(Math.random() * 1000);
        console.log(i);
    }
};

asyncPromises();

Menggunakan Untuk Menunggu...Daripada (ES2020):

Serupa dengan async/menunggu, gunakan untuk menunggu.. .daripada sintaks untuk lelaran pada lelaran tak segerak.

const asyncPromises = async () => {
    for await (let i of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
        await delay(Math.random() * 1000);
        console.log(i);
    }
};

asyncPromises();

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Rantaian Asynchronous dengan Janji dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!