Tutorial: Melaksanakan Polyfills Promise.allSettled From Scratch dalam JavaScript

JavaScript memperkenalkan Promise.allSettled dalam ES2020 untuk memudahkan kerja dengan berbilang operasi tak segerak. Tidak seperti Promise.all, yang berlaku litar pintas apabila janji ditolak, Promise.allSettled memastikan anda mendapat hasil daripada semua janji, sama ada ia berjaya atau gagal.

Dalam tutorial ini, saya akan membimbing anda membuat pelaksanaan Promise.allSettled anda sendiri, memfokuskan pada membinanya dari awal. Kami juga akan meneroka cara janji berfungsi di sebalik tabir, membantu anda memahami tingkah laku tak segerak yang menjadikan JavaScript begitu berkuasa.

Apakah itu Promise.allSettled?

Sebelum kita menulis kod, mari kita pecahkan perkara yang dilakukan oleh Promise.allSettled:

• Input: Pelbagai janji.
• Output: Janji yang diselesaikan selepas semua janji input telah diselesaikan (sama ada dipenuhi atau ditolak), dengan susunan objek yang menerangkan hasil setiap janji.

Setiap objek dalam tatasusunan mengandungi:

• status: "dipenuhi" atau "ditolak".
• nilai: Nilai jika janji diselesaikan, atau alasan jika janji itu ditolak. Contoh:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

Output:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

Kaedah ini sesuai apabila anda perlu menunggu semua janji untuk diselesaikan, tidak kira sama ada ia berjaya atau gagal.

Mengapa Melaksanakan Promise.allSettled Yourself?

Walaupun ciri ini kini tersedia dalam penyemak imbas moden, melaksanakannya sendiri menawarkan pemahaman yang lebih mendalam tentang cara janji JavaScript berfungsi. Selain itu, ia memastikan keserasian dengan persekitaran lama yang tidak menyokong ciri ES2020 secara asli.

Panduan Langkah demi Langkah untuk Melaksanakan Promise.allSettled

Kami akan mencipta fungsi bernama allSettled yang meniru gelagat Promise.allSettled. Mari bina langkah demi langkah ini:

Langkah 1: Buat Fungsi Pembungkus

Fungsi ini mengambil pelbagai janji dan mengembalikan janji baharu. Janji baharu ini akan diselesaikan apabila semua janji input selesai (sama ada selesai atau tolak).

function allSettled(promises) {
  // This will return a new promise that resolves when all promises settle
  return new Promise((resolve) => {
    // Implementation goes here
  });
}

Langkah 2: Kendalikan Setiap Janji

Untuk setiap janji dalam tatasusunan, kita perlu menjejaki sama ada ia menyelesaikan atau menolak. Kami akan membungkus setiap janji dengan .then() dan .catch() untuk menangkap statusnya:

function allSettled(promises) {
  return new Promise((resolve) => {
    let results = [];
    let count = 0;

    promises.forEach((promise, index) => {
      // Wrap the promise with a .then() and .catch() to capture the result
      promise
        .then((value) => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch((reason) => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          count++;
          // Once all promises have settled, resolve the outer promise
          if (count === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

Penjelasan:

1. Mencipta Janji Luar:

Fungsi allSettled mengembalikan Janji baharu. Janji ini akan diselesaikan apabila semua janji input telah diselesaikan.

2. Mengulang Janji:

Kami mengulangi tatasusunan janji menggunakan .forEach. Untuk setiap janji, kami menjejaki keputusannya dengan .then() (untuk janji yang diselesaikan) dan .catch() (untuk janji yang ditolak).

3. Keputusan Rakaman:

Hasil setiap janji disimpan dalam tatasusunan hasil. Jika janji diselesaikan, objek mengandungi { status: 'fulfilled', value }. Jika ia menolak, ia menyimpan { status: 'rejected', reason }.

4. Menghitung Janji Yang Ditetapkan:

Kami menggunakan pembolehubah kiraan untuk menjejaki berapa banyak janji yang telah dijelaskan. Setiap kali janji selesai (sama ada melalui .then() atau .catch()), kami menambah kiraan. Setelah kiraan menyamai panjang tatasusunan input, kami menyelesaikan janji luar dengan tatasusunan hasil.

Langkah 3: Menguji Fungsi AllSettled Kami

Sekarang, mari kita uji pelaksanaan tersuai ini:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

Output:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

Seperti yang dijangkakan, fungsi menunggu semua janji diselesaikan dan tatasusunan hasil memberi kami maklumat terperinci tentang setiap janji, termasuk sama ada janji itu diselesaikan atau ditolak.

Pandangan Lebih Dalam Kepada Janji

Untuk mengukuhkan pemahaman, mari kita pecahkan cara janji berfungsi:

• Janji mewakili hasil akhirnya daripada operasi tak segerak. Apabila janji dibuat, ia dalam keadaan belum selesai.
• Janji boleh:

Diselesaikan (dipenuhi) apabila operasi selesai dengan jayanya.

Ditolak apabila operasi gagal.

Selesai apabila ia sama ada dipenuhi atau ditolak

Kaedah then() membolehkan kami menentukan fungsi yang akan dilaksanakan apabila janji diselesaikan, manakala catch() membolehkan kami mengendalikan penolakan. Menggunakan finally() memastikan kami mengendalikan penyelesaian janji (sama ada kejayaan atau kegagalan) tanpa pertindihan.

Kesimpulan

Melaksanakan Promise.allSettled sendiri ialah cara yang hebat untuk memahami cara janji berfungsi pada tahap asas. Perkara utama ialah Promise.allSettled menunggu semua janji selesai, tidak seperti Promise.all, yang berhenti apabila ia menghadapi penolakan.

Dengan melaksanakan perkara ini dari awal, anda juga telah mempelajari cara mengendalikan berbilang operasi tak segerak dengan cara yang bersih dan cekap. Kini anda boleh menggunakan pengetahuan ini untuk bekerja dengan janji dalam mana-mana persekitaran JavaScript, termasuk yang tidak menyokong ciri moden secara asli.

Atas ialah kandungan terperinci Tutorial: Melaksanakan Polyfills Promise.allSettled From Scratch dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!