Artikel umum

Menggunakan Async/menunggu di JavaScript dengan contoh

Menggunakan Async/menunggu di JavaScript dengan contoh

Async/Awak adalah ciri JavaScript yang membolehkan pemaju menulis kod tak segerak dengan cara yang lebih segerak. Dengan async/menunggu, pemaju boleh menulis kod yang menunggu operasi tak segerak untuk disiapkan, tanpa menyekat benang utama pelaksanaan.

Dalam artikel ini, kami akan meneroka cara menggunakan async/menunggu di JavaScript dengan beberapa contoh.

Sintaks async/menunggu

Sintaks async/menunggu agak mudah. Untuk menentukan fungsi tak segerak, anda menambah kata kunci async sebelum kata kunci fungsi, seperti ini:

fungsi async getData () // kod async pergi ke sini
123fungsi async getData () // kod async pergi ke sini

Di dalam async Fungsi, anda boleh menggunakan kata kunci menunggu untuk menunggu janji untuk menyelesaikannya, seperti ini:

fungsi async getData () const response = menunggu ambil ('https: // api.Contoh.com/data '); data const = menunggu tindak balas.json (); pulangan data;
12345fungsi async getData () const response = menunggu ambil ('https: // api.Contoh.com/data '); data const = menunggu tindak balas.json (); pulangan data;

Dalam contoh ini, kami menggunakan fungsi pengambilan untuk membuat permintaan HTTP, dan kemudian gunakan kata kunci menunggu untuk menunggu tindak balas dikembalikan. Kami kemudian menggunakan kata kunci menunggu sekali lagi untuk menunggu data JSON untuk dihuraikan sebelum mengembalikannya.

Contoh: Mengambil data dari API menggunakan async/menunggu

Mari kita lihat dengan lebih dekat cara menggunakan async/menunggu untuk mengambil data dari API. Dalam contoh ini, kami akan menggunakan fungsi pengambilan untuk membuat permintaan HTTP ke API GitHub, dan kemudian gunakan async/menunggu untuk menunggu respons dikembalikan.

fungsi async fetchgithubuser (nama pengguna) const url = 'https: // api.github.com/pengguna/$ username '; tindak balas const = menunggu pengambilan (url); data const = menunggu tindak balas.json (); pulangan data; Fetchgithubuser ('octocat') .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat));
12345678910fungsi async fetchgithubuser (nama pengguna) const url = 'https: // api.github.com/pengguna/$ username '; tindak balas const = menunggu pengambilan (url); data const = menunggu tindak balas.json (); pulangan data; fetchgithubuser ('octocat') .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat));

Dalam contoh ini, kami menentukan fungsi async yang dipanggil Fetchgithubuser yang memerlukan nama pengguna github sebagai parameternya. Di dalam fungsi, kami membina URL untuk permintaan API, gunakan fungsi pengambilan untuk membuat permintaan, dan kemudian gunakan kata kunci menunggu untuk menunggu respons dikembalikan. Kami kemudian menggunakan kata kunci menunggu sekali lagi untuk menunggu data JSON untuk dihuraikan sebelum mengembalikannya.

Untuk memanggil fungsi async, kami menggunakan sintaks janji standard, dengan a .kemudian () kaedah untuk mengendalikan kes kejayaan dan a .menangkap () kaedah untuk menangani sebarang kesilapan.

Contoh: Menggunakan janji dengan async/menunggu

Kadang -kadang, anda mungkin perlu menggunakan janji dengan async/menunggu. Dalam contoh ini, kami akan menggunakan Janji.semua() kaedah untuk membuat permintaan API berganda selari, dan kemudian gunakan async/menunggu untuk menunggu semua permintaan selesai sebelum meneruskan.

fungsi async fetchgithubdata () const urls = ['https: // api.github.com/pengguna/octocat ',' https: // api.github.com/pengguna/mojombo ',' https: // api.github.com/pengguna/defunkt ']; Janji Const = URL.peta (url => ambil (url)); respons const = tunggu janji.semua (janji); data const = tunggu janji.Semua (respons.peta (respons => respons.json ())); pulangan data; fetchgithubdata () .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat));
1234567891011121314151617fungsi async fetchgithubdata () const urls = ['https: // api.github.com/pengguna/octocat ',' https: // api.github.com/pengguna/mojombo ',' https: // api.github.com/pengguna/defunkt ']; Janji Const = URL.peta (url => ambil (url)); respons const = tunggu janji.semua (janji); data const = tunggu janji.Semua (respons.peta (respons => respons.json ())); pulangan data; fetchgithubdata () .Kemudian (data => konsol.log (data)) .menangkap (ralat => konsol.ralat (ralat));

Dalam contoh ini, kami menentukan fungsi async yang dipanggil fetchgithubdata yang membina pelbagai url permintaan API dan kemudian menggunakan peta () kaedah untuk membuat pelbagai janji yang akan mengambil data dari setiap URL. Kami kemudian menggunakan Janji.semua() kaedah untuk menunggu semua permintaan selesai sebelum meneruskan.

Setelah kami menerima semua jawapan, kami menggunakan peta () kaedah sekali lagi untuk membuat pelbagai janji yang akan menghuraikan data JSON dari setiap tindak balas. Kami kemudian menggunakan kata kunci menunggu sekali lagi untuk menunggu semua janji -janji ini selesai sebelum mengembalikan data sebagai pelbagai objek.

Amalan terbaik untuk menggunakan async/menunggu

Berikut adalah beberapa amalan terbaik untuk menggunakan async/menunggu dalam kod JavaScript anda:

  • Sentiasa mengendalikan kesilapan: Kod Asynchronous boleh terdedah kepada kesilapan, jadi penting untuk selalu mengendalikannya dengan betul. Anda boleh menggunakan cuba tangkap blok untuk menangkap kesilapan dalam fungsi async, atau anda boleh menggunakan .menangkap () kaedah pada janji untuk mengendalikan kesilapan dalam kod panggilan.
  • Jangan terlalu banyak async/menunggu: Walaupun async/menunggu boleh membuat kod tak segerak lebih mudah dibaca dan ditulis, tidak semestinya diperlukan atau sesuai. Hanya gunakan async/menunggu apabila anda perlu menunggu janji untuk menyelesaikannya sebelum meneruskan.
  • Gunakan janji.Semua () untuk permintaan selari: Sekiranya anda perlu membuat permintaan API berganda selari, gunakan Janji.semua() kaedah untuk menunggu semua permintaan selesai sebelum meneruskan.
  • Jangan menyekat utas utama: Ingat bahawa kod tak segerak dimaksudkan untuk berjalan di latar belakang, jadi elakkan menyekat benang utama pelaksanaan. Sekiranya kod anda mengambil masa yang lama untuk dijalankan, pertimbangkan untuk menggunakan pekerja web untuk menjalankannya di latar belakang.
  • Pastikan fungsi kecil dan fokus: Seperti mana -mana fungsi, penting untuk memastikan fungsi async kecil dan fokus. Sekiranya fungsi berfungsi terlalu banyak, pertimbangkan untuk memecahkannya menjadi fungsi yang lebih kecil dan lebih fokus.

Kesimpulan

Async/menunggu adalah ciri kuat javascript yang boleh menjadikan kod asynchronous lebih mudah dibaca dan ditulis. Dengan menggunakan kata kunci menunggu untuk menunggu janji untuk diselesaikan, anda boleh menulis kod yang kelihatan dan terasa lebih seperti kod segerak. Ingatlah untuk mengendalikan kesilapan dengan betul, gunakan janji.semua () untuk permintaan selari, dan elakkan menyekat benang utama pelaksanaan.