


Bagaimanakah saya boleh menukar fungsi panggil balik kepada Janji menggunakan async/menunggu dalam JavaScript?
Nov 02, 2024 am 04:04 AMMenukar 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) => { const img = new Image(); img.addEventListener('load', () => 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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
