Bagaimana Mengendalikan Promise Looping dalam JavaScript ES6 dengan betul?

JavaScript ES6 Promise Looping

Dalam JavaScript ES6, promises menawarkan mekanisme untuk pengaturcaraan tak segerak. Walau bagaimanapun, menggunakan janji dalam gelung for menimbulkan cabaran, kerana sifat segerak gelung boleh membawa kepada gelagat yang tidak dijangka.

Perantaian Janji Asynchronous

Untuk memastikan setiap janji berjalan hanya selepas pendahulunya telah diselesaikan, kita perlu melaksanakan rantaian janji tak segerak. Ini melibatkan mencipta setiap janji hanya apabila yang sebelumnya telah diselesaikan.

Promise Creation dengan setTimeout()

Untuk mensimulasikan operasi tak segerak, kami sering menggunakan setTimeout(). Walau bagaimanapun, untuk rantaian berfungsi dengan berkesan, kami memerlukan versi setTimeout() berasaskan Janji. Berikut ialah fungsi yang menjanjikan setTimeout():

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

Pilihan Penyelesaian

Dengan setTimeout() yang dijanjikan, beberapa pilihan tersedia untuk rantaian janji tak segerak dalam a untuk gelung:

1. untuk Gelung dengan Janji Permulaan:

Kaedah ini menggunakan gelung for yang bermula dengan janji penyelesaian serta-merta. Setiap lelaran merantai janji baharu berdasarkan hasil yang sebelumnya.

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

2. Array#reduce dengan Initial Promise:

Penyelesaian ini menggunakan Array#reduce untuk mengulangi julat nilai dan mencipta janji berdasarkan hasil setiap langkah.

const delayAndLog = (acc, i) => acc.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));

[...Array(10).keys()].reduce(delayAndLog, Promise.resolve());

3. Fungsi Rekursif dengan Resolusi Janji:

Kaedah ini melibatkan fungsi yang memanggil dirinya sendiri dalam panggilan balik kemudian. Setiap panggilan menyelesaikan Janji yang terhasil apabila lelaran seterusnya sudah sedia.

let i = 0;
const loop = () => delay(Math.random() * 1000)
        .then(() => console.log(i++))
        .then(loop);

loop().then(() => {});

4. async/wait (ES2017):

ES2017 memperkenalkan async/wait, yang membolehkan kod tak segerak yang lebih ringkas.

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

loop();

5. untuk menunggu...daripada (ES2020):

ES2020 diperkenalkan untuk menunggu...sintaks, yang memudahkan lelaran tak segerak.

async function* loop() {
    for (let i of [...Array(10).keys()]) {
        yield await delay(Math.random() * 1000);
    }
}

for await (const i of loop()) {
    console.log(i);
}

Penyelesaian ini memastikan setiap janji dalam gelung berjalan hanya selepas yang sebelumnya telah diselesaikan, seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Promise Looping dalam JavaScript ES6 dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!