Bagaimanakah kita boleh menggunakan Async/Await untuk mendapatkan semula dimensi imej dengan selamat daripada fungsi berasaskan panggil balik?

Mencipta Janji daripada Panggilan Balik dengan Async/Await

Fungsi yang disediakan, getImageData, menggunakan panggilan balik untuk mendapatkan semula dimensi imej semasa dimuatkan. Walau bagaimanapun, sifat segerak JavaScript boleh mengakibatkan nilai tidak ditentukan jika imej tidak dimuatkan sepenuhnya sebelum mengakses sifatnya.

Untuk menangani perkara ini, kami boleh memanfaatkan janji dan async/menunggu untuk menjamin ketersediaan lebar dan ketinggian sebelum menggunakannya.

Menukar Panggilan Balik kepada Janji

Langkah pertama ialah menukar fungsi getImageData kepada janji. Ini boleh dicapai menggunakan pembina Promise:

<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
    img.src = url;
  });
}</code>

Menggunakan Async/Await

Dengan fungsi loadImage sebagai janji, kita boleh menggunakan async/wait untuk memastikan imej dimuatkan sebelum mengakses dimensinya:

<code class="javascript">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>

Versi ini mengembalikan janji yang diselesaikan dengan dimensi imej hanya apabila imej telah selesai dimuatkan. Fungsi sedia kini boleh log dimensi ini tanpa menemui nilai yang tidak ditentukan.

Atas ialah kandungan terperinci Bagaimanakah kita boleh menggunakan Async/Await untuk mendapatkan semula dimensi imej dengan selamat daripada fungsi berasaskan panggil balik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!