Panduan pemula ' s ke JavaScript async/menunggu, dengan contoh

Operasi Asynchronous Master JavaScript: Async/menunggu penjelasan terperinci

Artikel ini meneroka mendalam

/async dalam JavaScript, mengajar anda bagaimana untuk mengawal operasi tak segerak secara efisien dan menulis lebih jelas dan lebih mudah dibaca kod. await

mata teras:

• /async Dalam JavaScript memudahkan pemprosesan operasi asynchronous, menjadikan kod itu kelihatan seperti dilaksanakan secara serentak, tetapi masih tidak menyekat. await Fungsi
• mengembalikan janji, dan kata kunci async menghentikan pelaksanaan fungsi sehingga janji diselesaikan, dengan itu meningkatkan kebolehbacaan kod dan kawalan aliran. await Pengendalian ralat fungsi
• boleh diuruskan dengan cekap menggunakan async/try blok atau catch kaedah. Promise catch() Gunakan
untuk mengoptimumkan perintah asynchronous berjalan selari, yang membolehkan berbilang
• diselesaikan secara serentak dan bukannya dilaksanakan secara berurutan. Promise.all Promise Async Iterators dan
gelung membenarkan pemprosesan yang betul
• fungsi dalam gelung, memastikan urutan pelaksanaan yang betul dan pengurusan prestasi yang lebih baik. for...of async Lapisan atas yang diperkenalkan oleh ES2022 membolehkan penggunaan
pada lapisan atas modul ES, memudahkan integrasi kod asynchronous tanpa memerlukan pembungkus tambahan.
• await Ringkasan Kandungan Kandungan: await

bagaimana membuat fungsi asynchronous JavaScript

Kata kunci

1. Kata kunci
   • async cara yang berbeza untuk mengisytiharkan fungsi asynchronous
   • await
   javascript
   • /
   Janji penggunaan bawah tanah
beralih dari janji ke
2. /await async
   • async pengendalian ralat dalam fungsi asynchronous await
   kaedah
   menggunakan panggilan fungsi
3. • catch() Jalankan arahan Asynchronous secara selari
   Asynchronous dalam gelung segerak
Tahap Atas
5. await
menulis kod asynchronous dengan yakin
6. await
Dalam JavaScript, beberapa operasi tidak segerak. Ini bermakna hasil atau nilai yang mereka hasilkan tidak akan segera tersedia.
Pertimbangkan kod berikut:

JavaScript Interpreter tidak menunggu fungsi Asynchronous

untuk disiapkan sebelum melaksanakan pernyataan seterusnya. Oleh itu, ia akan merekodkan data sebenar yang dikembalikan oleh API

.

<code class="language-javascript">function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');</code>

Dalam banyak kes, ini bukanlah tingkah laku yang diharapkan. Mujurlah, kita boleh menggunakan kata kunci

dan fetchDataFromApi untuk membuat program kami menunggu operasi tak segerak untuk disiapkan sebelum terus melaksanakan. 数据获取完成

Ciri ini memperkenalkan JavaScript dalam ES2017 dan disokong oleh semua pelayar moden.

async await bagaimana untuk membuat fungsi asynchronous JavaScript

Mari kita lihat lebih dekat pada logik pemerolehan data dalam fungsi

. Data pengambilan dalam JavaScript adalah contoh utama operasi tak segerak. Menggunakan API Fetch, kita boleh melakukan ini:

<code class="language-javascript">function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');</code>

di sini, kita mendapat jenaka pengaturcaraan dari Jokeapi. Tanggapan API adalah dalam format JSON, jadi selepas permintaan selesai (menggunakan kaedah json()) kami mengekstrak tindak balas dan kemudian log jenaka ke konsol.

Sila ambil perhatian bahawa Jokeapi adalah API pihak ketiga, jadi kami tidak dapat menjamin kualiti lelucon yang kami kembali!

Jika kita menjalankan kod ini dalam penyemak imbas atau dalam nod (versi 17.5 menggunakan bendera --experimental-fetch), kita melihat bahawa konsol masih melengkapkan kandungan dalam urutan yang salah.

mari kita ubahnya.

async Kata kunci

Perkara pertama yang perlu kita lakukan ialah menandakan fungsi termasuk sebagai fungsi tak segerak. Kita boleh melakukan ini menggunakan kata kunci async, dan kita meletakkannya di hadapan kata kunci function:

<code class="language-javascript">function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

fetchDataFromApi();
console.log('数据获取完成');</code>

fungsi async selalu mengembalikan janji (lebih lanjut mengenai ini kemudian), jadi hanya pautan then() ke panggilan fungsi untuk mendapatkan perintah pelaksanaan yang betul:

<code class="language-javascript">async function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}</code>

Jika kita menjalankan kod sekarang, kita akan melihat sesuatu seperti ini:

<code class="language-javascript">fetchDataFromApi()
  .then(() => {
    console.log('数据获取完成');
  });</code>

tetapi kami tidak mahu melakukan ini! Sintaks janji JavaScript boleh menjadi agak rumit, dan di mana async/await berkelip: ia membolehkan kita menulis kod asynchronous menggunakan sintaks yang kelihatan lebih seperti kod segerak, dan lebih mudah dibaca.

await Kata kunci

Perkara seterusnya yang perlu dilakukan adalah untuk mendahului mana -mana operasi tak segerak dalam fungsi dengan kata kunci await. Ini akan memaksa jurubahasa JavaScript untuk "menjeda" pelaksanaan dan menunggu hasilnya. Kita boleh menetapkan hasil operasi ini kepada pembolehubah:

<code>程序员的浪漫：一行代码解决千行代码的bug。
数据获取完成</code>

kita juga perlu menunggu hasil memanggil fungsi fetchDataFromApi:

<code class="language-javascript">async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}</code>

Malangnya, jika kita cuba menjalankan kod sekarang, kita akan menghadapi ralat:

<code class="language-javascript">await fetchDataFromApi();
console.log('数据获取完成');</code>

Ini kerana kita tidak boleh menggunakan async di luar fungsi await dalam skrip bukan modul. Kami akan merangkumi ini dengan lebih terperinci kemudian, tetapi sekarang cara paling mudah untuk menyelesaikan masalah ini adalah untuk membungkus kod panggilan dengan fungsinya sendiri, yang juga kami tandakan sebagai async:

<code>Uncaught SyntaxError: await is only valid in async functions, async generators and modules</code>

Jika kita menjalankan kod sekarang, semuanya harus dikeluarkan mengikut urutan yang betul:

<code class="language-javascript">async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

async function init() {
  await fetchDataFromApi();
  console.log('数据获取完成');
}

init();</code>

Hakikat bahawa kita memerlukan kod boilerplate tambahan ini adalah malang, tetapi pada pendapat saya kod itu masih lebih mudah dibaca daripada versi berasaskan janji.

cara yang berbeza untuk mengisytiharkan fungsi asynchronous

Contoh sebelumnya menggunakan dua pengisytiharan fungsi bernama (kata kunci function diikuti dengan nama fungsi), tetapi kami tidak terhad kepada ini. Kami juga boleh menandakan ekspresi fungsi, fungsi anak panah, dan fungsi tanpa nama sebagai async.

Jika anda ingin menyemak perbezaan antara pengisytiharan fungsi dan ekspresi fungsi, lihat panduan kami

(kandungan berikut adalah sama. Tulis semula perenggan mengikut perenggan mengikut teks asal, mengekalkan makna asal, dan menyesuaikan gaya bahasa untuk menjadikannya lebih lancar dan lebih semula jadi)

Atas ialah kandungan terperinci Panduan pemula ' s ke JavaScript async/menunggu, dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!