async / await
Menulis flow async yang lebih mudah dibaca dengan async function dan await.
Tujuan belajar
- Memahami async function sebagai function yang mengembalikan Promise
- Memakai await untuk menunggu hasil Promise
- Membaca ulang flow .then sebagai flow async/await
Isi lesson
6 blok- 1.Async flow bisa dibaca dari atas ke bawahBelum selesaiWajib
- 2.Flow dengan thenBelum selesaiWajib
- 3.Flow yang sama dengan async/awaitBelum selesaiWajib
- 4.await bukan membuat network jadi instanBelum selesaiWajib
- 5.Coding practiceBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Async flow bisa dibaca dari atas ke bawah
WajibPromise dengan then tetap valid, tetapi chain yang panjang bisa membuat alur sulit dibaca. async/await membantu kamu menulis operasi async seperti urutan langkah: tunggu data, olah data, lalu render hasil.
await hanya bisa dipakai di dalam async function atau di module context tertentu. Untuk tahap ini, anggap pola utama kamu adalah membuat async function lalu memakai await di dalamnya.
Bagian ini memengaruhi progres lesson.
Flow dengan then
Wajibfunction loadLessons() {
return getLessons().then((lessons) => {
renderLessons(lessons);
});
}Kode ini menunggu getLessons selesai lewat then. Saat Promise fulfilled, lessons dirender.
Bagian ini memengaruhi progres lesson.
Flow yang sama dengan async/await
Wajibasync function loadLessons() {
const lessons = await getLessons();
renderLessons(lessons);
}await menunggu getLessons selesai, lalu hasilnya disimpan ke lessons. Alurnya lebih mudah dibaca dari atas ke bawah.
Bagian ini memengaruhi progres lesson.
Tips
Wajibawait bukan membuat network jadi instan
await tidak mempercepat request. await hanya membuat kode async lebih mudah dibaca. Selama menunggu, browser tetap bisa mengerjakan hal lain.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususRefactor then ke async/await
Latihan mengubah flow Promise dengan then menjadi async function dengan await.
Tujuan awal: Fokus di tab JS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- async function mengembalikan Promise.
- await menunggu Promise selesai sebelum lanjut ke baris berikutnya.
- async/await sering membuat flow request lebih mudah dibaca.
- await tidak otomatis menangani error.
- Berikutnya, kamu akan menambahkan try/catch untuk menangani kegagalan async.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Async flow bisa dibaca dari atas ke bawah.