Frontend Academy · Pelajaran

Promise: then, catch, finally, Promise.all

Buat dan rangkai Promise, tangani error dalam blok catch, jalankan pembersihan dalam finally, dan jalankan beberapa Promise secara paralel dengan Promise.all.

Promise: then, catch, finally, Promise.all adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Promise?

Promise merepresentasikan nilai yang akan tersedia di masa mendatang. Promise adalah objek dengan salah satu dari tiga keadaan: menunggu (awal), terpenuhi (diselesaikan dengan suatu nilai), atau ditolak (gagal dengan suatu alasan). Setelah selesai, keadaan Promise bersifat permanen.

Membuat Promise

Buat Promise dengan konstruktor new Promise(executor). Fungsi executor menerima fungsi panggilan balik resolve dan reject. Panggil resolve dengan nilai keberhasilan atau reject dengan suatu kesalahan.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() — Menangani Keberhasilan

promise.then(onFulfilled) mendaftarkan fungsi panggilan balik yang berjalan ketika Promise terpenuhi. Fungsi tersebut menerima nilai yang telah diselesaikan. .then() mengembalikan Promise baru sehingga memungkinkan perangkaian.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() — Menangani Kesalahan

promise.catch(onRejected) menangani penolakan. Jika ditempatkan di akhir rangkaian, fungsi ini menangkap kesalahan apa pun dari langkah mana pun di atasnya.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() — Selalu Berjalan

promise.finally(onFinally) berjalan baik ketika Promise terpenuhi maupun ditolak. Ini sangat cocok untuk pembersihan: menyembunyikan pemutar pemuatan, melepaskan kunci, dan mencatat analitik.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Perangkaian Promise — Mengembalikan Nilai

Kembalikan suatu nilai dari .then(), dan nilai tersebut menjadi nilai yang diselesaikan untuk .then() berikutnya. Kembalikan Promise baru untuk merangkai operasi asinkron secara berurutan.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() — Berjalan secara Paralel

Promise.all([p1, p2, p3]) menunggu semua Promise selesai dan mengembalikan array hasil dalam urutan yang sama. Jika salah satu Promise ditolak, seluruh operasi langsung ditolak.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() — Tidak Gagal dengan Cepat

Promise.allSettled() menunggu semua Promise selesai (resolve atau reject) dan mengembalikan array objek hasil dengan {status, value} atau {status, reason}. Ini berguna ketika Anda tidak ingin satu kegagalan menghentikan semua hasil.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() dan Promise.any()

Promise.race() menyelesaikan atau menolak dengan Promise pertama yang selesai. Promise.any() menyelesaikan dengan Promise pertama yang terpenuhi (mengabaikan penolakan; hanya menolak jika semuanya ditolak). Ini berguna untuk batas waktu dan redundansi.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Membuat Promise yang Sudah Selesai

Promise.resolve(value) membuat Promise yang sudah terpenuhi dengan value. Promise.reject(error) membuat Promise yang sudah ditolak. Ini berguna untuk pengujian dan fungsi adaptor.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

Peristiwa Penolakan yang Tidak Ditangani

Jika Promise ditolak tanpa .catch(), penolakan tersebut menjadi penolakan yang tidak ditangani. Peramban modern dan Node.js mengeluarkan peringatan. Selalu pasang .catch() atau gunakan try/catch dengan async/await.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Pemeriksaan Singkat

Metode statis mana yang menjalankan beberapa Promise secara paralel dan menyelesaikan dengan array berisi semua hasil?

Ringkasan: Promise

.then() untuk keberhasilan, .catch() untuk kesalahan, dan .finally() untuk pembersihan. Rangkaian meneruskan nilai. Promise.all() menjalankan operasi secara paralel. Promise.allSettled() menoleransi kegagalan sebagian. Promise.race() digunakan untuk mendapatkan hasil tercepat. Selalu tangani penolakan. Kode modern menggunakan async/await sebagai sintaks ringkas di atas Promise.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Promise: then, catch, finally, Promise.all” gratis?

Ya — teks lengkap “Promise: then, catch, finally, Promise.all” 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 “Promise: then, catch, finally, Promise.all”?

Buat dan rangkai Promise, tangani error dalam blok catch, jalankan pembersihan dalam finally, dan jalankan beberapa Promise secara paralel dengan Promise.all. 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 3 dari 4.

Berapa lama pelajaran “Promise: then, catch, finally, Promise.all” 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

← Kembali ke Frontend Academy