‫Instruktur: Sekarang mari kita
‫bicara tentang fitur JavaScript asinkron yang menakjubkan yang disebut async/await.
‫Jadi janji telah membuat kode kami jauh lebih baik tetapi
‫kami masih bisa melakukan yang lebih baik.
‫Jadi, daripada menggunakan janji, dengan metode then, yang masih
‫membuat kita menggunakan semua fungsi callback ini, kita bisa
‫menggunakan sesuatu yang disebut async/await.
‫Itu adalah fitur baru yang diperkenalkan ke JavaScript di ES8, yang
‫akan membuat hidup kita jauh lebih mudah.
‫Jadi biasanya ketika kita
‫menulis kode, kita akan memakan janji sepanjang waktu,
‫tetapi biasanya tidak memproduksinya terlalu banyak.
‫Jadi, async/await membuatnya lebih mudah dilakukan.
‫Sekarang untuk menggunakan async/menunggu,
‫kita perlu membuat apa yang disebut fungsi async.
‫Jadi mari kita komentari bagian ini di sini,
‫agar kita tidak kehilangannya sepenuhnya, jika Anda ingin
‫menyimpannya di sini sebagai referensi atau semacamnya.
‫Jadi getDogPic adalah fungsi yang akan kita tulis.
‫Dan sekarang kita perlu menandai fungsi
‫ini sebagai fungsi asinkron.
‫Jadi kami menggunakan async
‫di sini, dan kemudian membuat fungsi seperti yang biasa kami lakukan.
‫Jadi kata kunci async ini di sini
‫berarti bahwa ini adalah fungsi khusus yang tidak sinkron.
‫Jadi pada dasarnya, salah satu yang terus
‫berjalan di latar belakang saat menjalankan kode yang
‫ada di dalamnya, sementara kode lainnya tetap berjalan di Loop Peristiwa.
‫Jadi fungsi asinkron ini akan melakukan
‫pekerjaan asinkron tanpa pernah memblokir Loop Peristiwa, oke?
‫Fungsi async ini juga akan secara
‫otomatis mengembalikan Promise.
‫Tetapi lebih lanjut tentang itu nanti di video ini.
‫Untuk saat ini yang benar-benar
‫penting untuk diketahui adalah di dalam fungsi async kita selalu dapat
‫memiliki satu atau lebih ekspresi waiting
‫dan beginilah cara kerjanya.
‫Jadi kami menggunakan menunggu dan kemudian Janji di sini.
‫Jadi mari kita mulai dengan yang ini, oke?
‫Dan kemudian kita bisa menyimpan hasilnya ke dalam sebuah variabel.
‫Dalam hal ini, data.
‫Oke, jadi ini di sini akan sama dengan
‫memiliki potongan kode ini.
‫Jadi mari kita lihat apa yang terjadi di sini.
‫Jadi penantian ini pada dasarnya akan
‫menghentikan kode agar tidak berjalan pada titik ini hingga Janji ini diselesaikan.
‫Sekarang jika Promise terpenuhi,
‫yang ingat berarti berhasil, maka
‫nilai dari ekspresi
‫menunggu adalah nilai yang diselesaikan dari
‫Promise, yang kemudian akhirnya ditugaskan ke variabel data, oke?
‫Jadi, alih-alih memiliki Promise dan
‫kemudian metode then di
‫atasnya, yang kemudian mendapatkan data sebagai argumen.
‫Dengan async/menunggu itu jauh lebih sederhana.
‫Yang kita lakukan pada dasarnya adalah menghentikan kode agar tidak berjalan
‫di Janji ini di sini, tunggu
‫sampai kembali dengan nilainya dan kemudian simpan nilai itu ke dalam variabel.
‫Dan seperti ini kodenya
‫bahkan lebih mudah dipahami daripada sebelumnya.
‫Dan itulah inti
‫dari async/await: ini untuk membuat kode kita terlihat
‫lebih seperti kode sinkron padahal
‫sebenarnya masih asinkron di belakang layar, oke?
‫Jadi mari kita lanjutkan dengan ini dan salin saja potongan-potongan
‫dari contoh ini sebelumnya ke yang baru, oke?
‫Jadi sebelumnya, kami memiliki Janji kami kemudian kami memiliki handler kami dan
‫kemudian kami mencatat data ke konsol.
‫Jadi itulah yang kita
‫miliki, hanya dengan cara yang berbeda di sini.
‫Jadi kami menyimpan data kami ke dalam
‫variabel dan kemudian mencatatnya di sini.
‫Selanjutnya, kami kemudian mendapatkan gambar anjing dari API.
‫Jadi kita punya variabel res, jadi yang ini.
‫Jadi sekali lagi, hasil dari penangan
‫lalu dan kami menunggu Janji ini di sini untuk kembali dengan data.
‫Saya harap ini mulai masuk akal sekarang.
‫Jadi setelah itu, kita log ini ke konsol, jadi
‫hasil dari panggilan API itu.
‫Dan akhirnya, kami menggunakan Janji terakhir
‫kami untuk menulis string itu ke file.
‫Jadi itulah Janji ini di
‫sini, dan yang ini tidak menyelesaikan nilai yang berarti.
‫Jadi kita bahkan tidak perlu menyimpan apapun ke dalam sebuah variabel.
‫Yang kita lakukan hanyalah menghentikan
‫kode di sini sampai proses penulisan itu selesai.
‫Dan kemudian masuk ke konsol
‫string ini.
‫Jadi jika Anda membandingkan kode ini dengan apa yang
‫kita miliki sebelumnya yang terlihat
‫jauh lebih bersih dan lebih mudah dipahami, bukan?
‫Sekarang, untuk membuat ini berfungsi,
‫yang harus kita lakukan hanyalah memanggil fungsi ini di sini.
‫Berikan simpanan dan memang itu masih berfungsi.
‫Jadi kami masih mendapatkan hasil kami.
‫Semuanya masih bekerja sama.
‫Jadi itu luar biasa, bukan?
‫Hanya satu hal terakhir yang perlu kita lakukan
‫di sini adalah penanganan kesalahan kita.
‫Karena saat ini, kami tidak menangani kesalahan di mana pun, kan?
‫Jadi di sini menggunakan metode tangkap,
‫tapi sekarang, kita tidak
‫bisa memasangnya di mana pun, bukan?
‫Jadi sebagai gantinya, yang
‫kita lakukan di sini adalah menggunakan sesuatu yang disebut try-catch.
‫Dan sebenarnya itu tidak ada hubungannya dengan async/menunggu,
‫ini adalah fitur JavaScript standar.
‫Jadi izinkan saya menunjukkan cara kerjanya.
‫Jadi pada dasarnya kita membungkus semua kode kita ke dalam blok try.
‫Jadi pada dasarnya kode
‫akan mencoba mengeksekusi apa pun yang ada di sini.
‫Dan kemudian kita juga membutuhkan blok
‫catch, yang akan memiliki akses ke kesalahan jika ada.
‫Jadi jika terjadi kesalahan pada blok ini di sini, maka akan
‫segera keluar dari blok ini, coba
‫blok ini di sini, jadi yang ini.
‫Dan langsung masuk ke blok catch, dan akan
‫memberikan kita akses error yang
‫terjadi di blok try.
‫Jadi sekarang, yang harus kita lakukan adalah mengambil potongan kode
‫ini untuk log konsol ini,
‫taruh di sini, simpan dan sekarang berhasil.
‫Hanya untuk menyebabkan
‫kesalahan sekarang, mari kita ubah yang ini di sini lagi.
‫Dan memang, saya tidak dapat menemukan file itu.
‫Jadi Janji ini di sini ditolak, kan?
‫Jadi Janji ini, ditolak dan jadi ada kesalahan
‫dan segera masuk ke blok tangkap dan kemudian mencatat
‫kesalahan ini ke konsol.
‫Taruh lagi.
‫Dan sekarang memang, itu berfungsi lagi.
‫Oke, jadi begitulah cara kerja async/await.
‫Jadi ingat kita hanya bisa menggunakan menunggu jika
‫ada di dalam fungsi async.
‫Itu sebabnya selalu dipanggil bersama, jadi
‫selalu menunggu async slash.
‫Karena kedua fitur ini, mereka saling terkait erat.
‫Jadi untuk rekap
‫cepat, async/await memungkinkan kita alih-alih memiliki
‫semua penangan lalu dengan
‫fungsi panggilan balik ini di dalamnya.
‫Ini memungkinkan kita untuk membuat kode kita terlihat lebih sinkron.
‫Jadi yang kita lakukan hanyalah menggunakan kata kunci menunggu
‫di depan Janji kita.
‫Dan kemudian ia akan menunggu Janji
‫itu kembali dengan hasilnya.
‫Ingatlah bahwa inilah yang
‫kami sebut gula sintaksis untuk janji.
‫Jadi itu hanya membuat janji terlihat lebih indah, tetapi di
‫balik layar semuanya masih bekerja sama dengan logika
‫Janji yang saya jelaskan kepada Anda sebelumnya.
‫Jadi sekali lagi, ini hanya
‫untuk membuat hidup kita sedikit lebih mudah saat coding
‫dan membuat kode kita terlihat sedikit lebih seperti kode sinkron.
‫Jadi beginilah cara kami mengimplementasikan async/await.
‫Di video berikutnya
‫kita akan belajar lebih banyak tentang cara kerja fungsi async.