Permintaan jaringan, pembacaan file, dan pengatur waktu semuanya selesai nanti, namun JavaScript tidak bisa berhenti begitu saja dan menunggu, atau halaman akan terhenti. JavaScript janji memberi Anda cara yang rapi untuk mengatakan “setelah ini selesai, lakukan itu, dan jika gagal, lakukan ini.”

Bahkan jika Anda kebanyakan menulis async dan await, Anda menggunakan janji di bawahnya, jadi memahaminya membuat proses debug jauh lebih mudah. Kami menjalankan contoh ini di Node.js 24, dan output yang ditampilkan berasal dari proses tersebut. Mereka berperilaku sama di browser modern.

Apa itu janji?

Janji adalah pengganti nilai masa depan. Bayangkan bel yang diberikan restoran kepada Anda saat Anda memesan. Anda belum mempunyai makanan, tetapi Anda memegang sesuatu yang akan memberi tahu Anda kapan makanan itu sudah siap, atau bahwa ada masalah, dan sementara itu Anda bebas melakukan hal-hal lain.

Dalam kode, fungsi asinkron segera mengembalikan janji, dan Anda melampirkan apa yang harus terjadi selanjutnya:

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

Tiga janji itu menyatakan

Janji yang dipenuhi atau ditolak disebut diselesaikan. Sebuah janji hanya bisa ditepati satu kali. Setelah itu, status dan nilainya ditetapkan, dan panggilan selanjutnya ke resolve atau reject diabaikan.

Ciptakan sebuah janji

Anda biasanya menggunakan janji dari API seperti fetch, tetapi membuatnya menunjukkan cara kerjanya. Konstruktor menerima dua fungsi, resolve dan reject:

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Mencatat janji dengan segera menunjukkan bahwa janji tersebut masih tertunda, karena pengatur waktu belum diaktifkan. Nilainya hanya dapat dicapai melalui handler atau await. Selalu tolak dengan objek Error daripada string, karena Error membawa jejak tumpukan yang membantu proses debug.

lalu, tangkap dan terakhir

Ketiga metode ini melampirkan penangan pada sebuah janji:

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then berjalan jika berhasil, catch berjalan jika gagal, dan finally berjalan dengan cara apa pun. Hal ini menjadikan finally tempat yang tepat untuk pembersihan, seperti menyembunyikan spinner pemuatan. Ia tidak menerima argumen, karena tidak peduli dengan hasilnya.

Merangkai janji

Ide utamanya adalah then selalu mengembalikan janji baru. Apapun yang dikembalikan oleh handler Anda akan menjadi nilai janji baru itu:

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

Jika pawang mengembalikan janji lainnya, rantai menunggu hingga janji tersebut diselesaikan sebelum melanjutkan. Inilah yang mengubah callback bersarang menjadi serangkaian langkah datar:

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

Bagaimana kesalahan berjalan melalui sebuah rantai

Janji yang ditolak dilewati setiap then hingga mencapai catch. Melempar ke dalam seorang pawang juga dianggap sebagai penolakan. Dan catch yang kembali secara normal membuat rantai kembali ke jalurnya:

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

Anggap saja ini sebagai versi asinkron dari try dan catch. Satu catch di ujung biasanya menutupi keseluruhan rantai. Jika Anda hanya ingin mencatat kesalahan dan masih gagal, buang lagi dari dalam catch.

Janji.semua, semua, ras, dan apa saja

Metode statis ini mengoordinasikan beberapa janji sekaligus. Semuanya mengambil array dan mengembalikan satu janji.

Untuk mengujinya, kami menggunakan dua pembantu kecil, satu berhasil setelah penundaan dan satu lagi gagal setelah penundaan:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

Dua detail yang perlu diperhatikan. Hasil tetap mengikuti urutan masukan, meskipun b selesai terlebih dahulu. Dan total waktunya sekitar 300 ms, waktu tugas paling lambat dan bukan jumlah 600 ms, karena ketiganya sudah berjalan sekaligus. Jika salah satu dari mereka menolak, maka semuanya langsung menolak:

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

Ini menunggu semuanya dan melaporkan setiap hasil, sehingga satu kegagalan tidak menghilangkan sisanya. Ini sesuai dengan dasbor tempat setiap widget dimuat secara independen:

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Janji.ras dan Janji.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

Perbedaannya adalah race mengambil penyelesaian pertama, meskipun gagal, sedangkan any mengabaikan kegagalan selama sesuatu berhasil. Penggunaan klasik race adalah menambahkan batas waktu ke permintaan yang lambat, meskipun tugas yang lebih lambat tetap berjalan di latar belakang kecuali Anda membatalkannya.

Janji dan async/menunggu

async dan await adalah cara yang lebih mudah dibaca untuk bekerja dengan janji yang sama. Fungsi async selalu mengembalikan janji, dan await menjeda fungsi tersebut hingga janji diselesaikan:

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

Penolakan menjadi kesalahan yang terjadi, jadi try dan catch biasa berfungsi. Anda masih memerlukan Promise.all untuk pekerjaan paralel, karena menunggu panggilan demi panggilan akan menjalankannya secara berurutan. Panduan async/await JavaScript kami membahas hal ini lebih dalam.

Janji dan putaran acara

Penangan janji tidak pernah dipanggil segera, bahkan ketika janji sudah dilunasi. Mereka berjalan setelah kode saat ini selesai, dan sebelum penghitung waktu apa pun. Ini buktinya:

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

Kode sinkron dijalankan terlebih dahulu. Berikutnya adalah antrean tugas mikro, yang menampung penangan janji. Baru kemudian perulangan peristiwa mengambil tugas berikutnya, seperti pengatur waktu. Ini adalah pertanyaan wawancara yang populer, dan ini menjelaskan mengapa angka nol setTimeout tidak terlalu langsung.

Janji vs panggilan balik

Kesalahan umum

• Lupa kembali ke dalam then. Tanpa return, langkah selanjutnya menerima undefined dan tidak menunggu janji batin Anda.
• Tidak catch sama sekali. Hal ini menyebabkan penolakan yang tidak tertangani, dan di Node.js menghentikan proses secara default.
• Membuat sarang, bukan merangkai. Menempatkan then di dalam then akan menciptakan kembali neraka callback. Kembalikan janjinya dan lanjutkan rantainya.
• Membungkus janji di new Promise. Jika suatu fungsi sudah mengembalikan janji, gunakan saja.
• Menggunakan forEach dengan callback asinkron. Tidak menunggu. Gunakan for...of atau Promise.all dengan map, seperti yang ditunjukkan dalam panduan kami tentang metode array JavaScript.
• Menganggap sebuah janji bisa dibatalkan. Ia tidak bisa dengan sendirinya. Untuk permintaan, gunakan AbortController.

Penutup

Janji mempunyai beberapa aturan: janji diselesaikan satu kali, then mengembalikan janji baru, dan kesalahan terus berlanjut hingga ada yang menangkapnya. Begitu aturan tersebut terasa alami, async dan await tidak lagi bersifat ajaib. Untuk berlatih, tulis ulang satu fungsi berbasis panggilan balik menggunakan janji, lalu ambil dua titik akhir dengan Promise.all dan tangani kegagalan dengan benar.

Pertanyaan yang sering diajukan

Teruslah belajar