async/await dan Penanganan Error
Tulis fungsi async dengan kata kunci await, bungkus pemanggilan yang di-await dalam blok try/catch, dan pahami bahwa async/await adalah sintaks yang menyederhanakan Promise.
async/await dan Penanganan Error adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu async/await?
async/await adalah sintaks ringkas di atas Promise. Fungsi async selalu mengembalikan Promise. Kata kunci await menjeda fungsi hingga Promise yang ditunggu selesai. Kode tampak sinkron, tetapi berjalan secara asinkron.
Fungsi async
Tambahkan kata kunci async sebelum deklarasi atau ekspresi fungsi. Fungsi tersebut sekarang secara implisit membungkus nilai yang dikembalikannya dalam Promise.
async function fetchUser(id) {
// implicitly returns a Promise
return { id, name: 'Alice' };
}
// Equivalent to:
function fetchUser(id) {
return Promise.resolve({ id, name: 'Alice' });
}await — Menjeda untuk Promise
await hanya dapat digunakan di dalam fungsi async. Kata ini menjeda eksekusi hingga Promise selesai dan mengembalikan nilai yang telah diselesaikan. Kode lain dalam perulangan peristiwa tetap berjalan.
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}await Berurutan vs Paralel
Menunggu secara berurutan mudah dibaca, tetapi lambat jika tugas-tugas tersebut tidak saling bergantung. Gunakan Promise.all() untuk menunggu beberapa tugas independen secara paralel.
// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily
// Parallel (fast):
const [user, settings] = await Promise.all([
fetchUser(id),
fetchSettings(id),
]);try/catch untuk Penanganan Kesalahan
Bungkus pemanggilan yang ditunggu dalam try/catch untuk menangani penolakan. Blok catch menerima alasan penolakan sebagai objek kesalahan.
async function saveUser(data) {
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) throw new Error(`Server error ${response.status}`);
return await response.json();
} catch (err) {
console.error('Save failed:', err.message);
throw err; // re-throw so caller can handle
}
}await Tingkat Teratas
Dalam modul ES (bukan CommonJS), Anda dapat menggunakan await di tingkat teratas tanpa membungkusnya dalam fungsi async. Ini berguna untuk inisialisasi modul.
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;async/await dengan forEach — Jebakan
Array.forEach() tidak menunggu fungsi panggilan balik async. Gunakan for...of untuk iterasi asinkron berurutan, atau Promise.all(arr.map(...)) untuk eksekusi paralel.
// WRONG — forEach doesn't await:
items.forEach(async (item) => {
await processItem(item); // runs but forEach doesn't wait
});
// CORRECT — sequential:
for (const item of items) {
await processItem(item);
}
// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));Objek Kesalahan dan Kesalahan Khusus
Selalu lempar objek kesalahan, bukan string, agar jejak tumpukan tetap tersimpan. Buat kelas kesalahan khusus untuk kesalahan khusus domain yang dapat ditangkap oleh pemanggil berdasarkan tipenya.
class NetworkError extends Error {
constructor(message, status) {
super(message);
this.name = 'NetworkError';
this.status = status;
}
}
try {
const res = await fetch(url);
if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
if (err instanceof NetworkError && err.status === 401) {
redirectToLogin();
} else {
throw err;
}
}finally dalam async/await
Blok finally berjalan baik ketika try berhasil maupun gagal — sama seperti .finally() pada Promise. Gunakan blok ini untuk melepaskan sumber daya atau menyembunyikan status pemuatan.
async function loadData() {
setLoading(true);
try {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false); // always runs
}
}IIFE Asinkron untuk Titik Masuk Modul
Bungkus titik masuk skrip dalam IIFE async ketika Anda tidak dapat menggunakan await tingkat teratas.
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();AbortController untuk Pembatalan
Teruskan sinyal AbortController ke fetch untuk membatalkan permintaan yang sedang berlangsung. Menangkap AbortError secara terpisah mencegah Anda menampilkan kesalahan kepada pengguna.
const controller = new AbortController();
try {
const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
setData(data);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
// Cancel:
controller.abort();Pemeriksaan Singkat
Konstruksi mana yang menangani kesalahan dari Promise yang ditunggu dengan benar?
Ringkasan: async/await
Fungsi async selalu mengembalikan Promise. await menjeda eksekusi hingga Promise selesai. Gunakan try/catch untuk penanganan kesalahan. Untuk operasi paralel, gunakan Promise.all(). Hindari await di dalam forEach — gunakan for...of atau Promise.all. AbortController membatalkan permintaan yang sedang berlangsung. await tingkat teratas berfungsi dalam modul ES.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “async/await dan Penanganan Error” gratis?
Ya — teks lengkap “async/await dan Penanganan Error” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “async/await dan Penanganan Error”?
Tulis fungsi async dengan kata kunci await, bungkus pemanggilan yang di-await dalam blok try/catch, dan pahami bahwa async/await adalah sintaks yang menyederhanakan Promise. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “async/await dan Penanganan Error” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Event Loop: Call Stack, Queue, Microtask
- Callback dan Callback Hell
- Promise: then, catch, finally, Promise.all
- async/await dan Penanganan Error