Bagaimanakah saya boleh menukar fungsi panggil balik kepada Janji menggunakan async/menunggu dalam JavaScript?

Menukar Fungsi Panggilan Balik kepada Janji dengan tidak segerak/menunggu

Dalam JavaScript, keupayaan untuk menangguhkan pelaksanaan kod sehingga peristiwa tertentu berlaku adalah keperluan biasa. Apabila bekerja dengan kod tak segerak, panggilan balik telah menjadi pendekatan tradisional dalam JavaScript, tetapi janji menawarkan cara yang lebih ringkas dan fleksibel untuk mengendalikan operasi tak segerak. Janji memungkinkan untuk merantai dan menunggu operasi, memudahkan kod async dan meningkatkan kebolehbacaan.

Masalah

Pertimbangkan fungsi berikut yang mengambil imej daripada URL, memuatkannya dan mengembalikan lebarnya dan ketinggian:

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

Menggunakan fungsi ini sebagai panggilan balik, kami mungkin menghadapi masalah apabila cuba mengakses data imej dengan segera. Sebagai contoh, jika kita menggunakan fungsi seperti berikut:

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

Fungsi getImageData dilaksanakan serta-merta, tetapi imej mungkin belum selesai dimuatkan, menghasilkan output yang tidak ditentukan. Untuk mengatasi isu ini, kami boleh memanfaatkan janji dan async/menunggu untuk memastikan data imej diambil hanya selepas imej berjaya dimuatkan.

Penyelesaian

Daripada bergantung pada panggilan balik, kami boleh tukar getImageData kepada fungsi berasaskan janji:

<code class="js">function loadImage(url) {
  return new Promise((resolve, reject) =&gt; {
    const img = new Image();
    img.addEventListener('load', () =&gt; resolve(img));
    img.addEventListener('error', reject); // Don't forget to handle errors
    img.src = url;
  });
}</code>

Kini, kita boleh menggunakan async/menunggu untuk mendapatkan semula data imej hanya apabila ia tersedia:

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

Dengan menggunakan janji dan async/menunggu, kami boleh memastikan bahawa data imej boleh diakses hanya selepas imej telah dimuatkan, memberikan pendekatan yang lebih mantap dan bersih untuk mengendalikan operasi tak segerak.

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