Bagaimanakah Async/Await boleh digunakan untuk menukar fungsi pemuatan imej berasaskan panggilan balik kepada pendekatan berasaskan janji untuk akses data imej segerak?

Menggunakan Async/Await untuk Menukar Panggilan Balik kepada Janji

Dalam JavaScript, fungsi berikut mendapatkan semula data imej daripada URL:

<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>

Fungsi ini menggunakan pendekatan panggil balik, tetapi ia memberikan had apabila cuba mengakses data imej secara serentak. Jika anda menggunakan getImageData dalam kaedah sedia seperti berikut:

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

anda akan memperoleh undefined kerana imej itu belum dimuatkan lagi. Oleh itu, adalah perlu untuk menggunakan teknik tak segerak untuk mengendalikan operasi pemuatan imej sebelum mengakses data imej.

Untuk mencapai matlamat ini, anda boleh memanfaatkan pembina Promise seperti berikut:

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

Sekarang , anda boleh menggunakan async/await untuk menunggu janji loadImage dan seterusnya mendapatkan semula data imej:

<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>

Dalam pelaksanaan yang diubah suai ini, async/waiit memastikan bahawa kod dijeda sehingga janji loadImage diselesaikan, justeru menjamin bahawa data imej tersedia pada masa pengelogan.

Atas ialah kandungan terperinci Bagaimanakah Async/Await boleh digunakan untuk menukar fungsi pemuatan imej berasaskan panggilan balik kepada pendekatan berasaskan janji untuk akses data imej segerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!