1 00:00:01,340 --> 00:00:03,150 ‫Instruktur: Sekarang mari kita 2 00:00:03,150 --> 00:00:06,643 ‫bicara tentang fitur JavaScript asinkron yang menakjubkan yang disebut async/await. 3 00:00:08,040 --> 00:00:11,023 ‫Jadi janji telah membuat kode kami jauh lebih baik tetapi 4 00:00:11,023 --> 00:00:13,340 ‫kami masih bisa melakukan yang lebih baik. 5 00:00:13,340 --> 00:00:16,400 ‫Jadi, daripada menggunakan janji, dengan metode then, yang masih 6 00:00:16,400 --> 00:00:19,380 ‫membuat kita menggunakan semua fungsi callback ini, kita bisa 7 00:00:19,380 --> 00:00:21,440 ‫menggunakan sesuatu yang disebut async/await. 8 00:00:21,440 --> 00:00:25,040 ‫Itu adalah fitur baru yang diperkenalkan ke JavaScript di ES8, yang 9 00:00:25,040 --> 00:00:27,710 ‫akan membuat hidup kita jauh lebih mudah. 10 00:00:27,710 --> 00:00:29,370 ‫Jadi biasanya ketika kita 11 00:00:29,370 --> 00:00:32,020 ‫menulis kode, kita akan memakan janji sepanjang waktu, 12 00:00:32,020 --> 00:00:34,380 ‫tetapi biasanya tidak memproduksinya terlalu banyak. 13 00:00:34,380 --> 00:00:38,510 ‫Jadi, async/await membuatnya lebih mudah dilakukan. 14 00:00:38,510 --> 00:00:40,070 ‫Sekarang untuk menggunakan async/menunggu, 15 00:00:40,070 --> 00:00:42,623 ‫kita perlu membuat apa yang disebut fungsi async. 16 00:00:44,610 --> 00:00:47,570 ‫Jadi mari kita komentari bagian ini di sini, 17 00:00:47,570 --> 00:00:50,520 ‫agar kita tidak kehilangannya sepenuhnya, jika Anda ingin 18 00:00:50,520 --> 00:00:53,170 ‫menyimpannya di sini sebagai referensi atau semacamnya. 19 00:00:55,240 --> 00:01:00,000 ‫Jadi getDogPic adalah fungsi yang akan kita tulis. 20 00:01:00,000 --> 00:01:02,210 ‫Dan sekarang kita perlu menandai fungsi 21 00:01:02,210 --> 00:01:04,350 ‫ini sebagai fungsi asinkron. 22 00:01:04,350 --> 00:01:05,883 ‫Jadi kami menggunakan async 23 00:01:07,840 --> 00:01:11,390 ‫di sini, dan kemudian membuat fungsi seperti yang biasa kami lakukan. 24 00:01:11,390 --> 00:01:14,260 ‫Jadi kata kunci async ini di sini 25 00:01:14,260 --> 00:01:17,430 ‫berarti bahwa ini adalah fungsi khusus yang tidak sinkron. 26 00:01:17,430 --> 00:01:19,780 ‫Jadi pada dasarnya, salah satu yang terus 27 00:01:19,780 --> 00:01:22,350 ‫berjalan di latar belakang saat menjalankan kode yang 28 00:01:22,350 --> 00:01:25,540 ‫ada di dalamnya, sementara kode lainnya tetap berjalan di Loop Peristiwa. 29 00:01:25,540 --> 00:01:28,680 ‫Jadi fungsi asinkron ini akan melakukan 30 00:01:28,680 --> 00:01:31,873 ‫pekerjaan asinkron tanpa pernah memblokir Loop Peristiwa, oke? 31 00:01:31,873 --> 00:01:33,980 ‫Fungsi async ini juga akan secara 32 00:01:33,980 --> 00:01:35,490 ‫otomatis mengembalikan Promise. 33 00:01:35,490 --> 00:01:37,723 ‫Tetapi lebih lanjut tentang itu nanti di video ini. 34 00:01:38,840 --> 00:01:40,610 ‫Untuk saat ini yang benar-benar 35 00:01:40,610 --> 00:01:44,200 ‫penting untuk diketahui adalah di dalam fungsi async kita selalu dapat 36 00:01:44,200 --> 00:01:46,420 ‫memiliki satu atau lebih ekspresi waiting 37 00:01:46,420 --> 00:01:48,000 ‫dan beginilah cara kerjanya. 38 00:01:48,000 --> 00:01:50,453 ‫Jadi kami menggunakan menunggu dan kemudian Janji di sini. 39 00:01:51,540 --> 00:01:55,690 ‫Jadi mari kita mulai dengan yang ini, oke? 40 00:01:55,690 --> 00:02:00,320 ‫Dan kemudian kita bisa menyimpan hasilnya ke dalam sebuah variabel. 41 00:02:00,320 --> 00:02:01,800 ‫Dalam hal ini, data. 42 00:02:01,800 --> 00:02:05,470 ‫Oke, jadi ini di sini akan sama dengan 43 00:02:05,470 --> 00:02:08,080 ‫memiliki potongan kode ini. 44 00:02:08,080 --> 00:02:10,190 ‫Jadi mari kita lihat apa yang terjadi di sini. 45 00:02:10,190 --> 00:02:13,060 ‫Jadi penantian ini pada dasarnya akan 46 00:02:13,060 --> 00:02:17,680 ‫menghentikan kode agar tidak berjalan pada titik ini hingga Janji ini diselesaikan. 47 00:02:17,680 --> 00:02:19,960 ‫Sekarang jika Promise terpenuhi, 48 00:02:19,960 --> 00:02:22,490 ‫yang ingat berarti berhasil, maka 49 00:02:22,490 --> 00:02:24,660 ‫nilai dari ekspresi 50 00:02:24,660 --> 00:02:27,540 ‫menunggu adalah nilai yang diselesaikan dari 51 00:02:27,540 --> 00:02:32,280 ‫Promise, yang kemudian akhirnya ditugaskan ke variabel data, oke? 52 00:02:32,280 --> 00:02:34,500 ‫Jadi, alih-alih memiliki Promise dan 53 00:02:34,500 --> 00:02:36,300 ‫kemudian metode then di 54 00:02:36,300 --> 00:02:39,120 ‫atasnya, yang kemudian mendapatkan data sebagai argumen. 55 00:02:39,120 --> 00:02:41,560 ‫Dengan async/menunggu itu jauh lebih sederhana. 56 00:02:41,560 --> 00:02:45,400 ‫Yang kita lakukan pada dasarnya adalah menghentikan kode agar tidak berjalan 57 00:02:45,400 --> 00:02:47,960 ‫di Janji ini di sini, tunggu 58 00:02:47,960 --> 00:02:52,330 ‫sampai kembali dengan nilainya dan kemudian simpan nilai itu ke dalam variabel. 59 00:02:52,330 --> 00:02:54,230 ‫Dan seperti ini kodenya 60 00:02:54,230 --> 00:02:56,490 ‫bahkan lebih mudah dipahami daripada sebelumnya. 61 00:02:56,490 --> 00:02:58,600 ‫Dan itulah inti 62 00:02:58,600 --> 00:03:02,220 ‫dari async/await: ini untuk membuat kode kita terlihat 63 00:03:02,220 --> 00:03:04,910 ‫lebih seperti kode sinkron padahal 64 00:03:04,910 --> 00:03:08,200 ‫sebenarnya masih asinkron di belakang layar, oke? 65 00:03:08,200 --> 00:03:12,810 ‫Jadi mari kita lanjutkan dengan ini dan salin saja potongan-potongan 66 00:03:12,810 --> 00:03:17,060 ‫dari contoh ini sebelumnya ke yang baru, oke? 67 00:03:17,060 --> 00:03:22,010 ‫Jadi sebelumnya, kami memiliki Janji kami kemudian kami memiliki handler kami dan 68 00:03:22,010 --> 00:03:24,750 ‫kemudian kami mencatat data ke konsol. 69 00:03:24,750 --> 00:03:26,380 ‫Jadi itulah yang kita 70 00:03:26,380 --> 00:03:29,160 ‫miliki, hanya dengan cara yang berbeda di sini. 71 00:03:29,160 --> 00:03:31,240 ‫Jadi kami menyimpan data kami ke dalam 72 00:03:31,240 --> 00:03:33,110 ‫variabel dan kemudian mencatatnya di sini. 73 00:03:33,110 --> 00:03:37,210 ‫Selanjutnya, kami kemudian mendapatkan gambar anjing dari API. 74 00:03:37,210 --> 00:03:42,210 ‫Jadi kita punya variabel res, jadi yang ini. 75 00:03:42,260 --> 00:03:44,570 ‫Jadi sekali lagi, hasil dari penangan 76 00:03:46,660 --> 00:03:50,693 ‫lalu dan kami menunggu Janji ini di sini untuk kembali dengan data. 77 00:03:53,250 --> 00:03:55,443 ‫Saya harap ini mulai masuk akal sekarang. 78 00:04:00,180 --> 00:04:04,180 ‫Jadi setelah itu, kita log ini ke konsol, jadi 79 00:04:04,180 --> 00:04:06,440 ‫hasil dari panggilan API itu. 80 00:04:06,440 --> 00:04:09,250 ‫Dan akhirnya, kami menggunakan Janji terakhir 81 00:04:09,250 --> 00:04:12,430 ‫kami untuk menulis string itu ke file. 82 00:04:12,430 --> 00:04:15,260 ‫Jadi itulah Janji ini di 83 00:04:15,260 --> 00:04:19,110 ‫sini, dan yang ini tidak menyelesaikan nilai yang berarti. 84 00:04:19,110 --> 00:04:22,570 ‫Jadi kita bahkan tidak perlu menyimpan apapun ke dalam sebuah variabel. 85 00:04:22,570 --> 00:04:25,050 ‫Yang kita lakukan hanyalah menghentikan 86 00:04:25,050 --> 00:04:28,080 ‫kode di sini sampai proses penulisan itu selesai. 87 00:04:28,080 --> 00:04:30,580 ‫Dan kemudian masuk ke konsol 88 00:04:32,690 --> 00:04:34,003 ‫string ini. 89 00:04:35,561 --> 00:04:39,270 ‫Jadi jika Anda membandingkan kode ini dengan apa yang 90 00:04:39,270 --> 00:04:41,640 ‫kita miliki sebelumnya yang terlihat 91 00:04:41,640 --> 00:04:45,170 ‫jauh lebih bersih dan lebih mudah dipahami, bukan? 92 00:04:45,170 --> 00:04:47,300 ‫Sekarang, untuk membuat ini berfungsi, 93 00:04:47,300 --> 00:04:50,520 ‫yang harus kita lakukan hanyalah memanggil fungsi ini di sini. 94 00:04:50,520 --> 00:04:54,080 ‫Berikan simpanan dan memang itu masih berfungsi. 95 00:04:54,080 --> 00:04:56,700 ‫Jadi kami masih mendapatkan hasil kami. 96 00:04:56,700 --> 00:04:58,830 ‫Semuanya masih bekerja sama. 97 00:04:58,830 --> 00:05:00,570 ‫Jadi itu luar biasa, bukan? 98 00:05:00,570 --> 00:05:02,560 ‫Hanya satu hal terakhir yang perlu kita lakukan 99 00:05:02,560 --> 00:05:04,170 ‫di sini adalah penanganan kesalahan kita. 100 00:05:04,170 --> 00:05:08,080 ‫Karena saat ini, kami tidak menangani kesalahan di mana pun, kan? 101 00:05:08,080 --> 00:05:10,750 ‫Jadi di sini menggunakan metode tangkap, 102 00:05:10,750 --> 00:05:12,650 ‫tapi sekarang, kita tidak 103 00:05:12,650 --> 00:05:15,260 ‫bisa memasangnya di mana pun, bukan? 104 00:05:15,260 --> 00:05:16,920 ‫Jadi sebagai gantinya, yang 105 00:05:16,920 --> 00:05:20,130 ‫kita lakukan di sini adalah menggunakan sesuatu yang disebut try-catch. 106 00:05:20,130 --> 00:05:22,860 ‫Dan sebenarnya itu tidak ada hubungannya dengan async/menunggu, 107 00:05:22,860 --> 00:05:25,180 ‫ini adalah fitur JavaScript standar. 108 00:05:25,180 --> 00:05:26,853 ‫Jadi izinkan saya menunjukkan cara kerjanya. 109 00:05:28,130 --> 00:05:32,593 ‫Jadi pada dasarnya kita membungkus semua kode kita ke dalam blok try. 110 00:05:34,150 --> 00:05:35,500 ‫Jadi pada dasarnya kode 111 00:05:35,500 --> 00:05:38,340 ‫akan mencoba mengeksekusi apa pun yang ada di sini. 112 00:05:38,340 --> 00:05:41,240 ‫Dan kemudian kita juga membutuhkan blok 113 00:05:41,240 --> 00:05:44,780 ‫catch, yang akan memiliki akses ke kesalahan jika ada. 114 00:05:44,780 --> 00:05:47,950 ‫Jadi jika terjadi kesalahan pada blok ini di sini, maka akan 115 00:05:47,950 --> 00:05:49,960 ‫segera keluar dari blok ini, coba 116 00:05:49,960 --> 00:05:52,060 ‫blok ini di sini, jadi yang ini. 117 00:05:52,060 --> 00:05:55,070 ‫Dan langsung masuk ke blok catch, dan akan 118 00:05:55,070 --> 00:05:57,290 ‫memberikan kita akses error yang 119 00:05:57,290 --> 00:05:59,323 ‫terjadi di blok try. 120 00:06:00,760 --> 00:06:04,227 ‫Jadi sekarang, yang harus kita lakukan adalah mengambil potongan kode 121 00:06:04,227 --> 00:06:06,510 ‫ini untuk log konsol ini, 122 00:06:06,510 --> 00:06:09,163 ‫taruh di sini, simpan dan sekarang berhasil. 123 00:06:10,320 --> 00:06:11,460 ‫Hanya untuk menyebabkan 124 00:06:11,460 --> 00:06:14,120 ‫kesalahan sekarang, mari kita ubah yang ini di sini lagi. 125 00:06:14,120 --> 00:06:16,970 ‫Dan memang, saya tidak dapat menemukan file itu. 126 00:06:16,970 --> 00:06:20,040 ‫Jadi Janji ini di sini ditolak, kan? 127 00:06:20,040 --> 00:06:23,290 ‫Jadi Janji ini, ditolak dan jadi ada kesalahan 128 00:06:23,290 --> 00:06:26,960 ‫dan segera masuk ke blok tangkap dan kemudian mencatat 129 00:06:26,960 --> 00:06:29,253 ‫kesalahan ini ke konsol. 130 00:06:31,610 --> 00:06:32,443 ‫Taruh lagi. 131 00:06:34,040 --> 00:06:36,930 ‫Dan sekarang memang, itu berfungsi lagi. 132 00:06:36,930 --> 00:06:39,930 ‫Oke, jadi begitulah cara kerja async/await. 133 00:06:39,930 --> 00:06:42,420 ‫Jadi ingat kita hanya bisa menggunakan menunggu jika 134 00:06:42,420 --> 00:06:44,450 ‫ada di dalam fungsi async. 135 00:06:44,450 --> 00:06:46,880 ‫Itu sebabnya selalu dipanggil bersama, jadi 136 00:06:46,880 --> 00:06:49,270 ‫selalu menunggu async slash. 137 00:06:49,270 --> 00:06:53,070 ‫Karena kedua fitur ini, mereka saling terkait erat. 138 00:06:53,070 --> 00:06:54,835 ‫Jadi untuk rekap 139 00:06:54,835 --> 00:06:57,260 ‫cepat, async/await memungkinkan kita alih-alih memiliki 140 00:06:57,260 --> 00:06:59,270 ‫semua penangan lalu dengan 141 00:06:59,270 --> 00:07:01,630 ‫fungsi panggilan balik ini di dalamnya. 142 00:07:01,630 --> 00:07:05,590 ‫Ini memungkinkan kita untuk membuat kode kita terlihat lebih sinkron. 143 00:07:05,590 --> 00:07:09,180 ‫Jadi yang kita lakukan hanyalah menggunakan kata kunci menunggu 144 00:07:09,180 --> 00:07:11,340 ‫di depan Janji kita. 145 00:07:11,340 --> 00:07:13,380 ‫Dan kemudian ia akan menunggu Janji 146 00:07:13,380 --> 00:07:15,400 ‫itu kembali dengan hasilnya. 147 00:07:15,400 --> 00:07:17,000 ‫Ingatlah bahwa inilah yang 148 00:07:17,000 --> 00:07:19,360 ‫kami sebut gula sintaksis untuk janji. 149 00:07:19,360 --> 00:07:22,650 ‫Jadi itu hanya membuat janji terlihat lebih indah, tetapi di 150 00:07:22,650 --> 00:07:25,610 ‫balik layar semuanya masih bekerja sama dengan logika 151 00:07:25,610 --> 00:07:28,470 ‫Janji yang saya jelaskan kepada Anda sebelumnya. 152 00:07:28,470 --> 00:07:30,240 ‫Jadi sekali lagi, ini hanya 153 00:07:30,240 --> 00:07:32,750 ‫untuk membuat hidup kita sedikit lebih mudah saat coding 154 00:07:32,750 --> 00:07:35,520 ‫dan membuat kode kita terlihat sedikit lebih seperti kode sinkron. 155 00:07:35,520 --> 00:07:37,430 ‫Jadi beginilah cara kami mengimplementasikan async/await. 156 00:07:37,430 --> 00:07:38,810 ‫Di video berikutnya 157 00:07:38,810 --> 00:07:42,863 ‫kita akan belajar lebih banyak tentang cara kerja fungsi async.