Cara Mengurus Pelbagai janji serentak dengan Promise.all()

Pengaturcaraan tak segerak dalam JavaScript membenarkan operasi intensif sumber berjalan di latar belakang tanpa mengganggu urutan utama. Operasi seperti panggilan API dan proses fail ialah beberapa operasi yang harus dijalankan secara tidak segerak.

Janji. all() ialah fungsi berkuasa yang boleh menguruskan operasi ini secara serentak. Artikel ini akan membincangkan cara mengurus berbilang janji serentak dengan Promise.all()

Jom selami.

Apa itu Janji

Janji ialah objek yang mewakili kegagalan akhirnya atau penyiapan acara tak segerak. Mari lihat janji mudah.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

Janji mengambil fungsi dengan dua parameter, selesaikan dan tolak. Dalam contoh kami, janji akan diselesaikan jika operasi berjaya (iaitu, jika userId===1. Jika operasi gagal janji akan ditolak.

Kitaran hayat janji bermula dalam keadaan belum selesai, dan akhirnya akan sama ada ditepati atau ditolak. Pada masa ini, janji itu belum selesai. Untuk mengambil janji, kami memanggil .then() untuk mengendalikan hasilnya.

Output akan sama ada data pengguna (jika dipenuhi) atau ralat (jika ditolak).

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Oleh kerana operasi berjaya, janji akan diselesaikan.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

jika kami menukar nilai userId, janji akan ditolak dan anda akan mendapat ralat User not found

Andaikan anda mempunyai banyak janji, anda akan mengendalikan setiap janji secara bebas seperti ini:

const promise1 = new Promise((resolve, reject) => resolve(1));
const promise2 = new Promise((resolve, reject) => resolve(2));
const promise3 = new Promise((resolve, reject) => resolve(3));
promise1
  .then((value) => {
    console.log(value);
    promise2
      .then((value) => {
        console.log(value);
        promise3
          .then((value) => {
            console.log(value);
          })
          .catch((err) => {
            console.log("promise3 error", err);
          });
      })
      .catch((err) => {
        console.log("promise2 error", err);
      });
  })
  .catch((err) => {
    console.log("promise1 error", err);
  });

Terdapat beberapa isu berpotensi yang akan timbul daripada pelaksanaan di atas:

• Setiap janji berjalan selepas janji sebelumnya diselesaikan. promise2 akan bermula selepas promise1 selesai dan promise3 akan bermula selepas promise2 selesai; Ini melambatkan pelaksanaan.

• Struktur bersarang dalam .then chaining menghasilkan “callback hell”, menjadikan kod lebih sukar dibaca dan diselenggara.

• Setiap ralat dikendalikan secara bebas yang menambahkan lagi kerumitan.

Pendekatan yang lebih baik ialah menggunakan Promise.all(),yang membolehkan janji dijalankan pada masa yang sama, justeru meningkatkan prestasi dan pengendalian ralat

Meningkatkan Operasi Asynchronous dengan Promise.all()

Promise.all() mengambil janji yang boleh diubah dan mengembalikan satu janji. Sintaksnya kelihatan seperti ini:

Promise.all(iterable)

Jika kami menggunakan Promise.all() Dalam contoh terdahulu kami, kami mempunyai sesuatu seperti ini:

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((err) => {
    console.log("promise all error", err);
  });

Seperti yang anda lihat, pendekatan ini lebih bersih dan lebih mudah difahami.

JavaScript ialah bahasa satu utas, bermakna setiap keping kod menunggu yang sebelumnya selesai sebelum pergi ke yang seterusnya.

Jadi, jika JavaScript adalah satu utas, bagaimanakah Promise.all() mengendalikan berbilang janji?

Promise.all()beroperasi pada prinsip concurrency, yang bermaksud bahawa semua janji akan mula dilaksanakan tidak semestinya pada saat yang sama, tetapi dimulakan tanpa menunggu satu untuk dilengkapkan sebelum memulakan yang seterusnya.

Promise.all()hanya diselesaikan apabila semua janji dalam iterable dipenuhi, Walau bagaimanapun, jika mana-mana janji dalam iterable menolak, Promise.all() akan menolak serta-merta dan mengabaikan hasil janji yang tinggal.

Contoh Praktikal

Promise.all() cemerlang dalam senario di mana anda perlu melakukan berbilang operasi tak segerak bebas dan menunggu kesemuanya selesai sebelum meneruskan.

Mari lihat beberapa contoh ini di mana Promise.all() boleh digunakan untuk meningkatkan kecekapan dalam aplikasi dunia sebenar.

1.Mengambil Data daripada berbilang API

Pertimbangkan senario di mana anda sedang mengusahakan aplikasi yang mengambil data daripada dua API berbeza secara serentak.

Mari cuba mengambil data secara berurutan daripada berbilang API dan juga mencatat masa yang diambil untuk menyelesaikan permintaan.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

Berikut ialah output:

Masa yang diambil untuk memproses permintaan ialah 50.36 ms. Masa pelaksanaan ini boleh dipertingkatkan. Untuk menggambarkan faedah konkurensi, Mari bandingkan pendekatan menggunakan Promise.all()

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Di sini kami menggunakan Promise.all() untuk menjalankan berbilang operasi tak segerak secara serentak. Promise.all()akan mengambil pelbagai janji dan mengembalikan satu janji apabila semua janji telah diselesaikan.

Berikut ialah outputnya.

Daripada output, kita dapat melihat bahawa menggunakan Promise.all() adalah sedikit lebih cekap: Penambahbaikan ini berlaku kerana Promise.all() membenarkan kedua-dua operasi bermula serentak, dan bukannya menunggu satu selesai sebelum memulakan yang lain.

Dalam aplikasi dunia nyata dengan operasi yang lebih kompleks atau panggilan API tambahan, peningkatan prestasi daripada menggunakan Promise.all() boleh menjadi lebih ketara.

Namun, jika anda ingin menunggu semua janji itu diselesaikan, tidak kira sama ada ia ditepati atau ditolak, anda boleh menggunakan Promise.allSettled()

1. Menghantar Berbilang Potongan Data Katakan anda mempunyai pelbagai bahagian teks yang mewakili maklum balas atau ulasan pelanggan dan anda perlu menganalisis sentimen setiap bahagian dengan menghantarnya ke API luaran untuk dianalisis.

Dalam kes ini, semua data perlu dihantar pada masa yang sama. Dalam kes ini, anda boleh menggunakan Promise.all() dan menghantar semua permintaan secara serentak, kemudian tunggu semua permintaan itu diselesaikan sebelum mendapat keputusan.

Sebagai contoh, katakan kami perlu menganalisis data sampel ini:

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

Dalam kes ini, semua data perlu dihantar sekaligus; menghantar data secara berurutan akan memakan masa. Sebaliknya, kami akan menggunakan Promise.all() untuk memulakan berbilang panggilan API secara serentak.

Anda akan mendapat sesuatu seperti ini:

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

3. Membaca dan Memproses berbilang fail serentak.

Andaikan anda mempunyai aplikasi yang menerima muat naik pukal daripada pengguna. Selepas mengambil semua langkah yang diperlukan untuk mengesahkan fail, anda boleh menggunakan Promise.all() untuk melaksanakan berbilang bacaan fail secara selari. Ini jauh lebih cekap daripada membaca setiap fail satu demi satu secara berurutan.

Tanpa Promise.all(), anda perlu menunggu setiap fail dibaca sepenuhnya sebelum membaca fail seterusnya. Ini akan membawa kepada lebih banyak masa pemprosesan, terutamanya jika anda mempunyai bilangan fail yang lebih besar.

Walau bagaimanapun, dengan Promise.all(), semua operasi membaca fail dimulakan serentak, membawa kepada penjimatan masa yang banyak dan pengalaman pengguna yang hebat.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Perlu juga ambil perhatian bahawa apabila membaca banyak fail besar serentak, anda harus mengambil kira kemungkinan pertimbangan ingatan.

Ringkasan

Kesimpulannya, Promise.all() menawarkan banyak faedah yang diringkaskan di bawah

Kod Lebih Bersih: Promise.all()membuat kod anda lebih mudah difahami kerana anda tidak mempunyai rantai .then() bersarang. Permintaan dikendalikan dalam satu blok .then().

Cekap: Dengan membuat permintaan serentak, prestasi keseluruhan aplikasi anda bertambah baik, kerana jumlah masa yang diperlukan untuk mengambil data dikurangkan.

Tingkatkan JavaScript Anda

Dapatkan petua JavaScript praktikal dan coretan kod dihantar ke peti masuk anda. Sertai 1000 pembangun yang menulis kod yang lebih baik.

Atas ialah kandungan terperinci Cara Mengurus Pelbagai janji serentak dengan Promise.all(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!