Bagaimanakah Saya Boleh Melaksanakan Janji Secara Berurutan dalam JavaScript ES6 For Loop?

JavaScript ES6 Promise for Loop

Dalam pengaturcaraan, tugas biasa adalah untuk melelakan melalui koleksi dan melaksanakan operasi tak segerak pada setiap elemen. Dalam JavaScript ES6, janji menawarkan cara yang berkuasa untuk mencapai ini. Walau bagaimanapun, memastikan bahawa setiap janji dilaksanakan hanya selepas janji sebelumnya boleh mencabar.

Dalam coretan kod yang disediakan, gelung for mencipta semua janji secara serentak, menghasilkan output rawak. Matlamat kami adalah untuk menjadikan setiap janji dijalankan secara berurutan (.then()).

Menjanjikan setTimeout

Untuk menambah baik kod kami, mari buat versi setTimeout yang dijanjikan:

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

Fungsi ini mengembalikan janji yang diselesaikan apabila pemasa tamat tempoh, membolehkan kami merantai dengan mudah janji.

Merantai Janji

Dengan setTimeout yang dijanjikan, beberapa kaedah wujud untuk melaksanakan rantaian yang diingini:

1. Dengan untuk

Menggunakan gelung for, buat janji penyelesaian segera dan jalinkan janji baharu seperti yang diselesaikan sebelum ini:

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

2. Dengan Array.reduce

Pilihan lain ialah menggunakan Array.reduce:

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

3. Dengan Fungsi Rekursif

Fungsi rekursif juga boleh digunakan:

const loopPromise = (i, p) => {
    if (i >= 10) {
        return;
    }
    p.then(() => delay(Math.random() * 1000))
     .then(() => console.log(i))
     .then(() => loopPromise(i + 1, p));
};

loopPromise(0, Promise.resolve());

4. Dengan Async / Await

Sintaks ini tersedia dalam ECMAScript 2017:

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

asyncLoop();

5. Dengan menunggu...dari

Diperkenalkan dalam ECMAScript 2020, sintaks ini memudahkan lagi gelung:

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

Dengan memanfaatkan kaedah ini, kami boleh merangkai janji dengan berkesan dalam gelung for, memastikan bahawa setiap janji hanya dilaksanakan selepas janji sebelumnya diselesaikan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Janji Secara Berurutan dalam JavaScript ES6 For Loop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!