Menggunakan async/menunggu dalam javascript dengan contoh
- 1148
- 245
- Miss Angelo Toy
Async/Await adalah fitur JavaScript yang memungkinkan pengembang untuk menulis kode asinkron dengan cara yang lebih sinkron yang tampak sinkron. Dengan Async/Await, pengembang dapat menulis kode yang menunggu operasi asinkron untuk diselesaikan, tanpa memblokir utas utama eksekusi.
Di artikel ini, kami akan mengeksplorasi cara menggunakan async/menunggu di javascript dengan beberapa contoh.
Sintaks Async/Await
Sintaks async/menunggu cukup sederhana. Untuk mendefinisikan fungsi asinkron, Anda menambahkan kata kunci async sebelum kata kunci fungsi, seperti ini:
fungsi async getData () // kode async pergi ke sini| 123 | fungsi async getData () // kode async pergi ke sini |
Di dalam async Fungsi, Anda dapat menggunakan kata kunci Await untuk menunggu janji untuk menyelesaikan, seperti ini:
Fungsi async getData () const response = menunggu fetch ('https: // api.contoh.com/data '); data const = menunggu respons.json (); pengembalian data;| 12345 | Fungsi async getData () const response = menunggu fetch ('https: // api.contoh.com/data '); data const = menunggu respons.json (); mengembalikan data; |
Dalam contoh ini, kami menggunakan fungsi fetch untuk membuat permintaan http, dan kemudian menggunakan kata kunci menunggu untuk menunggu respons dikembalikan. Kami kemudian menggunakan kata kunci menunggu lagi untuk menunggu data JSON diuraikan sebelum mengembalikannya.
Contoh: Mengambil data dari API menggunakan async/menunggu
Mari kita lihat lebih dekat cara menggunakan async/menunggu untuk mengambil data dari API. Dalam contoh ini, kami akan menggunakan fungsi fetch untuk membuat permintaan HTTP ke Github API, dan kemudian menggunakan Async/menunggu untuk menunggu respons dikembalikan.
fungsi async fetchgithubuser (nama pengguna) const url = 'https: // api.GitHub.com/user/$ username '; respons const = menunggu pengambilan (url); data const = menunggu respons.json (); pengembalian data; fetchgithubuser ('octocat') .Kemudian (data => konsol.log (data)) .catch (error => console.error (error));| 12345678910 | fungsi async fetchgithubuser (nama pengguna) const url = 'https: // api.GitHub.com/user/$ username '; respons const = menunggu pengambilan (url); data const = menunggu respons.json (); mengembalikan data; fetchgithubuser ('octocat') .Kemudian (data => konsol.log (data)) .catch (error => console.error (error)); |
Dalam contoh ini, kami mendefinisikan fungsi async yang disebut fetchgithubuser itu membutuhkan nama pengguna GitHub sebagai parameternya. Di dalam fungsi, kami membangun URL untuk permintaan API, menggunakan fungsi fetch untuk membuat permintaan, dan kemudian menggunakan kata kunci menunggu untuk menunggu respons dikembalikan. Kami kemudian menggunakan kata kunci menunggu lagi untuk menunggu data JSON diuraikan sebelum mengembalikannya.
Untuk memanggil fungsi async, kami menggunakan sintaks janji standar, dengan a .Kemudian() metode untuk menangani kasus sukses dan a .menangkap() metode untuk menangani kesalahan apa pun.
Contoh: Menggunakan janji dengan async/menunggu
Terkadang, Anda mungkin perlu menggunakan janji dengan async/menunggu. Dalam contoh ini, kami akan menggunakan Janji.semua() Metode untuk membuat beberapa permintaan API secara paralel, dan kemudian menggunakan async/menunggu untuk menunggu semua permintaan untuk menyelesaikan sebelum melanjutkan.
| 1234567891011121314151617 | fungsi async fetchgithubdata () const urls = ['https: // api.GitHub.com/user/octocat ',' https: // api.GitHub.com/user/mojombo ',' https: // api.GitHub.com/user/defunkt ']; janji const = url.peta (url => fetch (url)); Const Responses = menunggu janji.semua (janji); data const = menunggu janji.semua (tanggapan.peta (respons => respons.json ())); data pengembalian; fetchgithubdata () .Kemudian (data => konsol.log (data)) .catch (error => console.error (error)); |
Dalam contoh ini, kami mendefinisikan fungsi async yang disebut fetchgithubdata yang membangun serangkaian URL permintaan API dan kemudian menggunakan peta() metode untuk membuat array janji yang akan mengambil data dari setiap URL. Kami kemudian menggunakan Janji.semua() metode untuk menunggu semua permintaan untuk diselesaikan sebelum melanjutkan.
Setelah kami menerima semua tanggapan, kami menggunakan peta() Metode lagi untuk membuat array janji yang akan menguraikan data JSON dari setiap respons. Kami kemudian menggunakan kata kunci menunggu lagi untuk menunggu semua janji ini menyelesaikan sebelum mengembalikan data sebagai array objek.
Praktik terbaik untuk menggunakan async/menunggu
Berikut adalah beberapa praktik terbaik untuk menggunakan Async/Await dalam kode JavaScript Anda:
- Selalu menangani kesalahan: Kode asinkron dapat rentan terhadap kesalahan, jadi penting untuk selalu menanganinya dengan benar. Anda dapat gunakan coba tangkap blok untuk menangkap kesalahan dalam fungsi async, atau Anda dapat menggunakan
.menangkap()Metode pada janji untuk menangani kesalahan dalam kode panggilan. - Jangan terlalu sering menggunakan Async/Await: Sementara async/waiting dapat membuat kode asinkron lebih mudah dibaca dan ditulis, itu tidak selalu diperlukan atau sesuai. Hanya gunakan async/tunggu saat Anda perlu menunggu janji untuk menyelesaikan sebelum melanjutkan.
- Gunakan janji.all () untuk permintaan paralel: Jika Anda perlu membuat beberapa permintaan API secara paralel, gunakan
Janji.semua()metode untuk menunggu semua permintaan untuk diselesaikan sebelum melanjutkan. - Jangan memblokir utas utama: Ingatlah bahwa kode asinkron dimaksudkan untuk berjalan di latar belakang, jadi hindari memblokir utas utama eksekusi. Jika kode Anda membutuhkan waktu lama untuk dijalankan, pertimbangkan untuk menggunakan pekerja web untuk menjalankannya di latar belakang.
- Tetap fungsi kecil dan fokus: Seperti halnya fungsi apa pun, penting untuk menjaga fungsi async kecil dan fokus. Jika suatu fungsi melakukan terlalu banyak, pertimbangkan untuk memecahnya menjadi fungsi yang lebih kecil dan lebih terfokus.
Kesimpulan
Async/Await adalah fitur yang kuat dari JavaScript yang dapat membuat kode asinkron lebih mudah dibaca dan ditulis. Dengan menggunakan kata kunci menunggu untuk menunggu janji untuk diselesaikan, Anda dapat menulis kode yang terlihat dan terasa lebih seperti kode sinkron. Ingatlah untuk menangani kesalahan dengan benar, gunakan janji.all () untuk permintaan paralel, dan hindari memblokir utas utama eksekusi.