Bagaimana untuk Menukar Panggilan Balik Pemuatan Imej kepada Janji Menggunakan async/menunggu?

Menukar Panggilan Balik kepada Janji Menggunakan async/menunggu

Panggil balik menyediakan cara yang mudah untuk mengendalikan kod tak segerak. Walau bagaimanapun, menggunakan janji dengan async/menunggu boleh menawarkan kelebihan dari segi kebolehbacaan dan kebolehselenggaraan kod. Soalan ini menangani cabaran untuk menukar fungsi panggil balik yang memuatkan lebar dan ketinggian imej ke dalam pelaksanaan berasaskan janji.

Isu dan Penyelesaian

Fungsi panggil balik yang disediakan, getImageData, mengembalikan lebar semula jadi dan ketinggian imej apabila ia selesai dimuatkan. Walau bagaimanapun, apabila dipanggil secara tidak segerak seperti yang ditunjukkan dalam contoh:

ready () {
  console.log(getImageData(this.url))
}

Nilai yang dikembalikan tidak ditentukan kerana panggilan balik dilaksanakan serta-merta, sementara imej mengambil sedikit masa untuk dimuatkan. Untuk mengatasinya, kita boleh menggunakan pembina Promise untuk mencipta janji yang diselesaikan sebaik sahaja imej dimuatkan. Berikut ialah fungsi getImageData yang dikemas kini sebagai janji:

function getImageData(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    });
    img.addEventListener('error', reject); // Handle errors here
    img.src = url;
  });
}

Dengan fungsi berasaskan janji ini, kita kini boleh menggunakan async/menunggu untuk menangguhkan pelaksanaan getImageData dan mendapatkan lebar dan ketinggian sebenar imej yang dimuatkan:

async function ready() {
  const imageData = await getImageData(this.url);
  console.log(imageData);
}

Kod ini memastikan pengelogan konsol berlaku hanya selepas imej dimuatkan sepenuhnya dan lebar serta tingginya tersedia.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Panggilan Balik Pemuatan Imej kepada Janji Menggunakan async/menunggu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!