Bagaimanakah anda boleh menukar fungsi berasaskan panggilan balik kepada yang berasaskan janji menggunakan async/menunggu dalam JavaScript?

Menukar Panggilan Balik kepada Janji Menggunakan Async/Await

Dalam JavaScript, panggil balik ialah pendekatan biasa untuk mengendalikan operasi tak segerak. Walau bagaimanapun, menggunakan panggilan balik boleh membawa kepada kod yang sukar dibaca dan diselenggara. Async/await ialah ciri baharu yang menyediakan cara yang lebih mudah untuk berfungsi dengan kod tak segerak.

Salah satu faedah utama async/wait ialah keupayaan untuk menjeda pelaksanaan fungsi sehingga janji diselesaikan. Ini membolehkan anda menulis kod yang lebih mudah dibaca dan diselenggara, terutamanya apabila berurusan dengan berbilang operasi tak segerak.

Pernyataan Masalah

Pertimbangkan fungsi berikut yang mendapatkan semula dimensi imej daripada URL yang diberikan menggunakan panggilan balik:

<code class="javascript">function getImageData(url) {
  const img = new Image();
  img.addEventListener('load', function () {
    return { width: this.naturalWidth, height: this.naturalHeight };
  });
  img.src = url;
}</code>

Walau bagaimanapun, kod ini boleh menjadi masalah jika anda perlu mendapatkan semula data imej dengan segera. Jika anda memanggil fungsi getImageData seperti ini:

<code class="javascript">ready() {
  console.log(getImageData(this.url));
}</code>

Anda akan menjadi tidak ditentukan kerana imej belum lagi dimuatkan pada masa panggilan balik dilaksanakan.

Menggunakan Async/ Tunggu

Untuk menyelesaikan masalah ini, anda boleh menggunakan async/await untuk menukar fungsi getImageData kepada janji. Begini cara anda melakukannya:

<code class="javascript">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Handle errors gracefully
    img.src = url;
  });
}

async function getImageData(url) {
  const img = await loadImage(url);
  return { width: img.naturalWidth, height: img.naturalHeight };
}

async function ready() {
  console.log(await getImageData(this.url));
}</code>

Dalam kod yang ditulis semula ini, kami mula-mula mencipta fungsi loadImage yang mengembalikan janji. Janji ini diselesaikan apabila imej telah selesai dimuatkan atau menolak jika terdapat ralat.

Seterusnya, kami mencipta fungsi getImageData yang menggunakan async/menunggu untuk menunggu janji dikembalikan oleh loadImage untuk diselesaikan sebelum mengembalikan dimensi imej.

Akhir sekali, kita boleh memanggil fungsi getImageData daripada fungsi sedia menggunakan async/await. Ini memastikan bahawa fungsi sedia hanya merekodkan dimensi imej selepas imej telah dimuatkan.

Dengan menggunakan async/wait, anda boleh memudahkan kod yang melibatkan operasi tak segerak dan menjadikannya lebih mudah dibaca dan diselenggara.

Atas ialah kandungan terperinci Bagaimanakah anda boleh menukar fungsi berasaskan panggilan balik kepada yang berasaskan janji menggunakan async/menunggu dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!