Bagaimana untuk Mensiri Janji dalam JavaScript ES6 For Loop?

JavaScript ES6 Promise For Loop Serialization

Dalam kod yang diberikan, anda cuba untuk melaksanakan janji secara berurutan dalam gelung for tetapi menghadapi masalah apabila gelung dilaksanakan secara serentak, mengakibatkan tidak dapat diramalkan output.

Memahami Isu:

Janji merangkumi operasi tak segerak, tetapi sifat segerak gelung mencetuskan semua janji serentak, mengabaikan urutan yang diingini.

Memberi janji setTimeout:

Untuk memudahkan pelaksanaan berurutan, kami boleh menjanjikan setTimeout untuk mendapatkan janji yang diselesaikan apabila pemasa tamat tempoh:

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

Pilihan Penyelesaian:

Terdapat pelbagai cara untuk menyelesaikan masalah ini, memanfaatkan janji dan tidak segerak teknik pengaturcaraan.

1. Untuk Gelung dengan Janji Permulaan:

Dengan bermula dengan janji yang diselesaikan serta-merta, anda boleh merangkai janji-janji berikutnya seperti yang diselesaikan oleh janji-janji 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:

Menggunakan Array.reduce, anda boleh mencipta rangkaian janji yang serupa dengan pendekatan gelung for:

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

3. Berfungsi sebagai Panggilan Balik Resolusi Janji:

Anda boleh mentakrifkan fungsi yang menyalin dirinya sebagai panggilan balik resolusi, membenarkan rantai janji rekursif:

const loop = (i) => {
  delay(Math.random() * 1000)
    .then(() => console.log(i))
    .then(() => {
      if (i < 10) loop(i + 1);
    });
};
loop(0);

4. async/wait Syntax (ES2017):

ES2017 memperkenalkan async/wait syntax untuk memudahkan pengendalian kod tak segerak:

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

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

ES2020 memperkenalkan sintaks khas untuk lelaran ke atas iterables tak segerak:

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

Dengan menggunakan teknik ini, anda boleh melaksanakan janji secara berurutan dalam satu gelung, memastikan susunan operasi yang diingini dan mengelakkan perkara yang tidak dapat diramalkan keluaran.

Atas ialah kandungan terperinci Bagaimana untuk Mensiri Janji dalam JavaScript ES6 For Loop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!