Lompati ke konten utama
Modul 7 · Pelajaran 1 dari 425/32 dalam kursus~12 min
Pelajaran modul (1/4)

Janji: apa adanya

Janji adalah nilai yang mewakili hasil operasi yang akan selesai di masa depan. Itu bisa di salah satu dari tiga negara bagian:

  • pending — operasi masih berlangsung
  • terpenuhi — selesai dengan sukses, ada nilainya
  • ditolak — gagal, ada kesalahan

Setelah meninggalkan status tertunda, maka "diselesaikan" selamanya.

Menciptakan Janji yang terselesaikan

Dua cara paling umum — Anda hampir tidak akan pernah membuat Janji "dengan tangan" dengan konstruktor:

JS
const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('oops'));

Membaca hasilnya: .then / .catch

JS
Promise.resolve(10).then((v) => {
  console.log(v); // 10
});

Promise.reject(new Error('no')).catch((e) => {
  console.log(e.message); // 'no'
});

.then menerima fungsi yang dipanggil dengan nilai terselesaikan. .catch menerima fungsi yang dipanggil dengan kesalahan jika terjadi penolakan.

Rantai

Setiap .then mengembalikan sebuah Janji: Anda dapat merangkainya untuk mengubah nilai selangkah demi selangkah.

JS
Promise.resolve(5)
  .then((n) => n * 2)
  .then((n) => n + 1)
  .then((n) => console.log(n)); // 11

Jika salah satu dari .then melempar (atau mengembalikan Janji yang gagal), eksekusi melompat ke .catch pertama berikutnya.

Konstruktor (jarang)

JS
const p = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) resolve('ok');
  else reject(new Error('no'));
});

Anda akan menggunakannya hanya ketika Anda perlu "menjanjikan" sesuatu yang menggunakan callback (misalnya API DOM lama atau setTimeout).

Cobalah

Latihan#js.m7.l1.e1
Upaya: 0Memuat…

Tentukan `promisedVersion(n)` yang, jika diberi nomor, akan mengembalikan Promise yang diselesaikan dengan n ganda.

Memuat editor…
Tunjukkan petunjuk

kembalikan Janji.resolve(n * 2)

Solusi tersedia setelah 3 upaya

Tinjau latihan

Latihan#js.m7.l1.e2
Upaya: 0Memuat…

Tentukan `incrementThree(p)` yang menerima Promise berupa angka dan mengembalikan Promise berupa angka + 3. Gunakan rantai .then.

Memuat editor…
Tunjukkan petunjuk

p.lalu((n) => n + 3)

Solusi tersedia setelah 3 upaya