‫Instruktur: Jadi,
‫Anda telah mempelajari cara
‫menggunakan Async/Menunggu tetapi sebenarnya ada sedikit
‫lagi yang harus dipelajari tentang cara kerja fungsi Async.
‫Jadi mari kita lakukan itu sekarang.
‫Untuk memahami sedikit lebih baik apa yang terjadi di sini, mari
‫kita coba menambahkan beberapa konsol. log setelah dan
‫sebelum memanggil fungsi Async di sini.
‫Oke, jadi konsol. log
‫Jadi langkah pertama
‫akan mendapatkan foto
‫anjing, oke.
‫Dan kemudian nomor dua.
‫Di
‫sini katakan saja, selesai mendapatkan foto anjing.
‫Oke. Jadi mari kita simpan.
‫Dan whoa, apa yang terjadi di sini.
‫Kami memiliki dua konsol ini. log sebelum
‫semua log yang berasal dari fungsi Async.
‫Jadi kami memiliki satu, dua untuk yang ini
‫dan yang ini dan
‫hanya setelah itu kami memiliki log
‫yang berasal dari gambar get dog.
‫Apakah itu yang Anda harapkan?
‫Jadi jika tidak, mari kita analisis apa yang terjadi di sini.
‫Seperti yang saya katakan sebelumnya, fungsi Async ini
‫sebenarnya berjalan di latar belakang.
‫Karena begitulah seharusnya fungsi
‫Async berperilaku.
‫Benar, itu masuk akal?
‫Jadi kita tidak bisa hanya menghentikan kode di sini.
‫Jadi segera setelah kita menekan fungsi
‫ini, kita tidak bisa begitu saja menghentikan eksekusi thread utama kita di sini.
‫Benar?
‫Dan itulah filosofi keseluruhan dari jangan
‫blokir log peristiwa.
‫Jadi kita perlu mendapatkan beberapa gambar anjing dari
‫API, tapi itu bukan alasan untuk menghentikan eksekusi kode.
‫Jadi untuk memblokir log peristiwa.
‫Jadi akibatnya ketika mesin skrip java berhenti, baris
‫kode ini di sini, itu hanya akan
‫memindahkan fungsi get dog pic ke latar belakang
‫dan langsung ke baris berikutnya.
‫Jadi konsol kedua ini. masuk di sini.
‫Jadi masuk akal bahwa pertama string ini di sini akan dicatat,
‫kemudian akan mulai menjalankan fungsi ini,
‫kemudian segera akan mencatat baris kode ini dan sementara
‫itu, kita membaca file ini di latar belakang, dan
‫segera setelah itu siap, ia
‫akan mulai mencetak log ini, log ini, dan
‫juga log ini.
‫Jadi itulah yang terjadi di sini.
‫Satu dua, dan kemudian tersisa tiga.
‫Masuk akal? Oke.
‫Kemudian mari kita melangkah lebih
‫jauh, dan benar-benar mengembalikan sesuatu dari fungsi Async kita.
‫Jadi saya mengubah ini di sini menjadi
‫tiga, sehingga dari fungsi ini, kita dapat
‫mengembalikan string yang mengatakan dua, katakanlah siap dan kemudian tambahkan di sini
‫lagi emoji di sini untuk
‫membuatnya sedikit lebih menonjol di konsol kita.
‫Jadi siap di sini.
‫Dan kemudian mari kita simpan itu.
‫Cukup beberapa variabel, tidak peduli apa itu.
‫Dan kemudian log x ke konsol.
‫Jadi mari kita lihat apa yang terjadi.
‫Dan sekarang di sini kita mendapatkan janji
‫aneh ini yang tertunda alih-alih string di sini yang mungkin kita harapkan.
‫Jadi mengapa x ada di sini dan bukan string ini,
‫tetapi janji ini di sini?
‫Nah, ingat bagaimana saya mengatakan di awal
‫video terakhir bahwa fungsi
‫Async sebenarnya mengembalikan janji secara otomatis?
‫Nah, ini dia buktinya.
‫Jadi, alih-alih siap masuk ke konsol pada saat ini, itu
‫hanya memberi tahu kita bahwa x adalah janji yang
‫pada saat ini masih berjalan, dan
‫masih menunggu keputusan.
‫Jadi itu sebabnya dikatakan tertunda di sini.
‫Jadi skrip java tentu saja tidak tahu bahwa x akan
‫menjadi string siap ini di beberapa titik.
‫Jadi itu hanya pindah ke konsol berikutnya. log seperti
‫yang telah kita bahas sebelumnya.
‫Dan pada saat JavaScript benar-benar tahu bahwa
‫x ini di sini harus menjadi strain yang kami kembalikan dengan
‫baik pada saat itu, kode ini di
‫sini telah lama selesai dieksekusi.
‫Tetapi apa yang harus kita lakukan jika
‫kita benar-benar ingin mendapatkan nilai pengembalian itu di sini?
‫Jadi bagaimana jika kita benar-benar ingin mengembalikan string
‫ini dan mencatatnya melalui konsol?
‫Nah, kita harus memperlakukan fungsi Async ini
‫sebagai sebuah janji.
‫Jadi kami akan menggunakan metode
‫DEN di atasnya atau lagi, gunakan Async/Await.
‫Mari saya tunjukkan cara melakukannya.
‫Jadi, alih-alih mencoba menyimpan nilai yang dikembalikan
‫ke variabel, kita bisa menggunakan metode DEN di atasnya.
‫Dan di sinilah kita kemudian dapat menyebutnya x.
‫Jadi konsol. log x jadi seperti yang kita miliki
‫di sini dan kemudian kita juga akan melakukan yang ini
‫di dalam pegangan DEN, oke?
‫Jadi mari kita tinjau apa yang kita lakukan di sini.
‫Jadi dapatkan gambar anjing mengembalikan janji, ingat itu?
‫Dan setiap yang kita punya janji, kita menggunakan metode DEN untuk
‫mendapatkan akses ke nilai masa depan.
‫Jadi nilai yang pada akhirnya akan kembali.
‫Dalam hal ini, ini akan menjadi dua string yang siap.
‫Oke?
‫Jadi jika Anda ingin mendapatkan x
‫untuk itu, kita perlu menggunakan metode DEN seperti yang baru saja kita lakukan di sini.
‫Dan hanya setelah itu kita dapat mencatat
‫string ketiga di sini.
‫Jadi jika kita menyimpannya sekarang
‫seperti ini maka seharusnya berfungsi seperti yang diharapkan.
‫Dan ya memang begitu.
‫Jadi kami memiliki log pertama kami, lalu semua log
‫yang berasal dari fungsi Async kami, lalu yang siap
‫datang dari baris 42 di sini.
‫Dan yang terakhir adalah nomor 3. Sempurna.
‫Dan saya harap itu masuk akal bagi Anda.
‫Sekarang apa yang terjadi jika sebenarnya ada kesalahan?
‫Nah itu sedikit lebih sulit untuk ditangani.
‫Jadi mari kita lagi, menyebabkan kesalahan seperti yang kita lakukan sebelumnya.
‫Tapi Anda lihat sebenarnya kita masih memasukkan metode
‫DEN di sini.
‫Jadi blok ini di sini, oke.
‫Jadi bahkan jika ada kesalahan di sini dalam janji ini
‫pada dasarnya masih diselesaikan sebagai janji yang berhasil.
‫Jadi masih mengembalikan nilai ini di sini.
‫Dan bahkan jika kita menambahkan penangan tangkapan kita di sini,
‫itu tidak akan mengubah fakta itu.
‫Oke, jadi mari kita gunakan catch di
‫sini dan kemudian gunakan console. log dan log kesalahan di sini
‫sehingga Anda dapat melihat bahwa itu masih tidak mencatat kesalahan apa pun.
‫Dan itu lagi karena janji di sini yang
‫berasal dari fungsi Async ini akan
‫tetap ditandai sebagai berhasil.
‫Tetapi jika Anda benar-benar ingin menandainya sebagai
‫ditolak, kami harus melakukan sesuatu yang disebut melempar kesalahan.
‫Jadi mari kita lakukan itu di sini, di blok tangkapan ini.
‫Jadi jika ada kesalahan, kami tidak hanya ingin memasukkannya
‫ke konsol, kami juga ingin membuangnya.
‫Jadi kami menggunakan fungsi JavaScript bawaan yang disebut throw.
‫Dan dengan itu kita bisa melempar kesalahan.
‫Jadi ini sekarang akan menandai seluruh fungsi dari janji ini
‫sebagai ditolak.
‫Oke.
‫Sebenarnya jangan hanya mencatat kesalahan ini,
‫mari kita lakukan kesalahan untuk membuatnya sedikit lebih terlihat,
‫dan sesuatu seperti ledakan mungkin.
‫Ya, sesuatu seperti ini.
‫Oke, jadi mari kita simpan dan lihat apa yang terjadi.
‫Dan bam, jadi sekarang kami memiliki kesalahan kami di sini sebenarnya.
‫Jadi dikatakan saya tidak dapat menemukan file
‫itu, jadi log ini berasal dari log tangkapan
‫ini di sini tetapi juga pada saat yang sama akan menimbulkan kesalahan.
‫Dan jika itu menimbulkan kesalahan, itu akan
‫menandai seluruh janji ini sebagai ditolak.
‫Dan itulah mengapa kami kemudian memasukkan log tangkapan di sini.
‫Yang kemudian, tentu saja, pada gilirannya memicu
‫konsol ini. log kesalahan ini.
‫Oke?
‫Dan ini tentu saja merupakan lapisan kompleksitas yang sama sekali baru.
‫Oke.
‫Tetapi tetap sangat penting untuk memahami cara kerjanya karena
‫hal ini selalu terjadi dalam kehidupan nyata.
‫Jadi, kita perlu mengembalikan nilai dari fungsi Async
‫setiap saat, jadi penting bagi Anda
‫untuk mengetahui cara menangani nilai yang dikembalikan ini.
‫Dalam hal ini, menggunakan DEN dan menangkap.
‫Sekarang, masalahnya adalah ia mencampur
‫janji dengan Async/Menunggu.
‫Jadi kami memiliki Async/Menunggu di
‫sini, lalu tiba-tiba kami kembali menggunakan DEN
‫dan mengejar di sini.
‫Jadi izinkan saya menunjukkan kepada Anda pola lain untuk melakukannya.
‫Oke, jadi mari kita masuk ke bagian ini
‫di sini bukan sebaliknya, lebih seperti ini.
‫Jadi mari kita gunakan Async/Await untuk mengimplementasikan logika ini.
‫Sekarang kita tidak ingin membuat fungsi nama yang sama sekali
‫baru untuk ini, jadi kita akan menggunakan pola terkenal
‫yang saya harap Anda tahu,
‫yang merupakan IIFE, jadi ekspresi fungsi yang segera dipanggil.
‫Oke, jadi dalam tanda kurung, kita mendefinisikan fungsi kita.
‫Seperti ini, dan kemudian kami menyebutnya segera.
‫Ingat itu?
‫Kemudian, dalam hal ini, karena kami ingin menggunakan Async/Await,
‫kami juga mengatakan bahwa itu adalah fungsi Async.
‫Oke, jadi ini terlihat agak aneh di sini,
‫tetapi jika Anda mengambil contoh kursus JavaScript saya, ini
‫sebenarnya akan terlihat familier bagi Anda.
‫Oke, sekali lagi, Anda mendeklarasikan fungsi
‫di dalam tanda kurung dan kemudian langsung memanggilnya fungsi.
‫Jadi dengan cara ini, Anda tidak
‫perlu mendeklarasikan seluruh fungsi nama lagi yang akan Anda
‫panggil nanti.
‫Oke.
‫Sekarang karena kami menggunakan Async/Await,
‫kami menggunakan pola try it catch lagi, seperti sebelumnya.
‫Jadi tangkap, dapatkan akses ke kesalahan di sini, dan kami
‫sebenarnya tidak dapat menghilangkan ini di sini.
‫Jadi meskipun kita tidak ingin menggunakan
‫kesalahan ini, kita tetap harus menuliskannya di sini.
‫Oke.
‫Di versi JavaScript mendatang, ini
‫akan hilang, tetapi untuk saat ini kita perlu melakukannya seperti ini.
‫Jadi di sinilah kesalahan ini akan terjadi.
‫Dan di atas sini, kita akan memiliki semua konsol ini. log.
‫Yang ini,
‫dan yang ini.
‫Dan sekarang saya harap Anda tahu bagaimana
‫sebenarnya mendapatkan nilai dari fungsi Async.
‫Jadi Anda tahu bagaimana melakukannya.
‫Sebenarnya saya akan menjeda video dan memungkinkan Anda untuk
‫mencari tahu bagaimana melakukannya sendiri, oke?
‫Jadi ambillah tantangan kecil itu dan saya akan
‫kembali sebentar lagi.
‫Jadi, apakah Anda berhasil mendapatkan string ini di sini,
‫jadi keduanya siap menjadi variabel x seperti
‫yang kita miliki sebelumnya?
‫Jadi seperti ini di sini?
‫Jadi seperti yang kita lakukan sebelumnya.
‫Anda mendeklarasikan variabel dan kemudian Anda menunggu janji.
‫Dan janjinya, dalam hal ini, adalah mendapatkan foto anjing.
‫Oke?
‫Jadi fungsi ini di sini adalah
‫fungsi Async dan mengembalikan janji.
‫Dan nilai hasil dari janji
‫itu adalah nilai ini
‫di sini, yang dikembalikan, dan dengan menunggu nilai
‫itu, hasilnya adalah string ini.
‫Jadi kami menyimpannya ke dalam x dan tentu saja
‫kami dapat memasukkannya ke konsol.
‫Jadi konsol. log x.
‫Kemudian jika ada kesalahan, itu akan menangkapnya dan mencatatnya
‫ke konsol di sini juga.
‫Jika kita menyimpannya sekarang,
‫maka kita masih mendapatkan kesalahan karena kita
‫menyimpannya di sini, jadi bagian itu masih berfungsi.
‫Memperbaikinya, menyimpannya, dan ini dia.
‫Jadi sekarang berfungsi seperti yang dimaksudkan.
‫Tetapi, sekali lagi, dengan Async/Await jauh lebih bersih,
‫terlihat jauh lebih baik dan juga lebih mudah dipahami.
‫Jadi kami tidak mencampur Async/Menunggu di satu tempat di sini dan
‫kemudian menggunakan DEN dan menangkap di sini seperti yang kami
‫lakukan sebelumnya dengan potongan kode ini.
‫Oke?
‫Jadi dalam kehidupan nyata, hal semacam ini terjadi sepanjang waktu.
‫Jadi kami memiliki fungsi Async dan kami
‫memanggilnya dari fungsi Async lain, dan mungkin kami
‫bahkan memanggil fungsi Async lain
‫dari fungsi Async pertama itu, jadi kami
‫memiliki banyak fungsi Async yang berinteraksi satu sama lain.
‫Jadi sangat penting bagi Anda untuk mengetahui bagaimana
‫semua ini bekerja.
‫Dan sekali lagi untuk rekap, hal
‫yang paling penting untuk diingat adalah bahwa fungsi
‫Async secara otomatis mengembalikan janji, dan nilai yang kita
‫kembalikan dari fungsi Async akan menjadi nilai hasil dari
‫janji itu.
‫Jadi dari sana, kita bisa menanganinya
‫sebagai janji lain.
‫Dan itulah tepatnya yang kami lakukan di sini dengan
‫menunggu janji pertama yang kami buat.
‫Oke?
‫Jadi, cobalah untuk memahami hal ini dan pastikan
‫bahwa Anda benar-benar memahaminya.
‫Karena sepanjang sisa kursus saya akan
‫berasumsi bahwa Anda tahu bagaimana bekerja dengan hal ini.
‫Dan itulah tepatnya mengapa saya
‫membuat bagian ini, untuk menghindarinya sebelum kita benar-benar mulai
‫bekerja tanpa JS dan express, dan semua hal bagus ini.
‫Oke?
‫Jadi kita hampir selesai dengan bagian ini, hanya ada satu hal
‫kecil yang ingin saya tunjukkan
‫di video berikutnya.