Bagaimana untuk Menggunakan Async/Await dengan Panggilan Balik dalam JavaScript?

Tunggu Resolusi Panggilan Balik

Dalam senario di mana panggilan balik mudah digunakan, seperti contoh di bawah:

test() {
  api.on( 'someEvent', function( response ) {
    return response;
  });
}

menukar fungsi ini untuk menggunakan async/menunggu memerlukan sedikit perubahan. Dengan mengandaikan 'someEvent' dijamin akan digunakan sekali sahaja, fungsi 'test' boleh diubah menjadi fungsi async yang menunggu pelaksanaan panggilan balik:

async test() {
  return await api.on( 'someEvent' );
}

Walau bagaimanapun, async/wait tidak mampu secara semula jadi. mengendalikan panggilan balik secara langsung. Untuk merapatkan jurang ini, api.on() mesti direka bentuk semula untuk mengembalikan Janji. Berikut ialah contoh:

function apiOn(event) {
  return new Promise(resolve => {
    api.on(event, response => resolve(response));
  });
}

Dengan pengubahsuaian ini, fungsi 'ujian' kini boleh ditulis sebagai:

async function test() {
  return await apiOn( 'someEvent' ); 
}

Sila ambil perhatian bahawa kata kunci await pada dasarnya adalah pilihan dalam konteks ini, kerana mana-mana pendekatan masih akan menyebabkan janji dikembalikan.

Akhir sekali, adalah penting untuk diingat bahawa fungsi async sendiri mengembalikan Promises. Oleh itu, mengakses nilai yang dikembalikan oleh 'test()' secara langsung tidak mungkin. Sebaliknya, Janji yang dikembalikan perlu ditangani:

async function whatever() {
  // snip
  const response = await test();
  // use response here
  // snip
}

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan Async/Await dengan Panggilan Balik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!