Promise: Janji di JavaScript

Menggunakan Promise untuk menangani operasi asinkron

Tujuan Pembelajaran

Memahami konsep Promise dan state-nya
Bisa membuat dan menggunakan Promise

Analogi

Diagram


      Promise = Resi Pesanan Online:

[Pending] → 'Pesanan diproses'
   ↓
[Fulfilled] → 'Pesanan berhasil!' ✅
   ↓
[Rejected] → 'Pesanan gagal!' ❌

Promise seperti resi pesanan — punya 3 status

Penjelasan Konsep

Di CSS, setiap elemen HTML dianggap sebagai sebuah kotak. Ini adalah konsep paling fundamental dalam layout web — disebut CSS Box Model. Memahami box model adalah kunci untuk bisa mengatur tata letak halaman dengan presisi.

Tanpa pemahaman box model, kamu akan frustrasi karena elemen tidak pernah berada di posisi yang kamu harapkan, ukurannya tidak sesuai,

Dan spacing terlihat aneh.

Bayangkan kamu mengirimkan hadiah lewat kurir.

Hadiah itu ada di dalam kardus.

Mari kita analogikan setiap bagian box model dengan komponen pengiriman:

Content = Barang Hadiah Itu Sendiri

Content adalah area di dalam elemen tempat konten sebenarnya berada — teks, gambar, video, atau elemen anak.

Ukuran content ditentukan oleh width dan height.

Secara default, kalau kamu set width: 300px,

Itu berarti content area-nya 300px lebarnya.

Padding = Bubble Wrap / Kertas Pelindung

Padding adalah ruang kosong DI DALAM elemen, antara content dan border.

Padding memberi “napas” pada konten — jarak antara teks dan garis tepi elemen.

Padding selalu berwarna sama dengan background elemen (karena dia di dalam elemen).

Semakin besar padding, semakin “gemuk” elemen terlihat.

Padding bisa diatur per sisi: padding-top, padding-right, padding-bottom, padding-left, atau shorthand padding: 10px 20px 15px 25px (atas,

Kanan, bawah, kiri).

Border = Kardus Pengiriman

Border adalah garis tepi yang mengelilingi padding dan content.

Border punya tiga properti:

border-width: Tebal garis (px, em)
border-style: Jenis garis (solid, dashed, dotted,

Double)

border-color: Warna garis Shorthand: border: 2px solid black;

Margin = Jarak Antar Kardus

Margin adalah ruang kosong DI LUAR elemen, di luar border.

Margin memisahkan elemen dari elemen lain di sekitarnya.

Margin tidak berwarna — dia transparan dan menunjukkan background elemen induk atau halaman.

Margin bisa diatur per sisi seperti padding, dan juga punya shorthand.

Box-sizing: Content-box vs Border-box

Ini adalah konsep yang sering membingungkan pemula. Secara default, browser menggunakan box-sizing: content-box, yang berarti width dan height yang kamu tentukan HANYA berlaku untuk content area. Jadi kalau kamu tulis:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Lebar TOTAL elemen = 300 + 20 + 20 + 5 + 5 = 350px! Bukan 300px!

Ini membuat perhitungan layout sangat rumit. Solusinya: gunakan box-sizing: border-box.

Dengan border-box, width dan height yang kamu tentukan sudah INCLUDES padding dan border.

Jadi lebar TOTAL tetap 300px — lebih intuitif!

Best Practice

Selalu set box-sizing: border-box di semua elemen:

*, *::before,

*::after {
  box-sizing: border-box;
}

Margin Collapse

Fenomena unik di CSS di mana margin vertikal antara dua elemen yang bersebelahan akan “bertabrakan” dan yang lebih besar yang menang.

Contoh: elemen A punya margin-bottom 30px, elemen B punya margin-top 20px.

Jarak antara mereka bukan 50px, tapi 30px (yang lebih besar).

Kenapa box model penting?

Karena 90% layout web adalah tentang mengatur kotak-kotak ini.

Flexbox, Grid, Float — semuanya pada dasarnya adalah cara mengatur box model. Memahami box model dengan baik akan menghemat berjam-jam frustrasi debugging layout.

Contoh Kode

javascript

// MEMBUAT PROMISE
const pesanMakanan = (menu) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const berhasil = Math.random() > 0.3;
      if (berhasil) {
        resolve(`${menu} sudah jadi!`);
      } else {
        reject(`Bahan ${menu} habis!`);
      }
    }, 2000);
  });
};

// MENGGUNAKAN PROMISE
pesanMakanan('Nasi Goreng')
  .then((hasil) => {
    console.log('✅', hasil);
    return pesanMakanan('Es Teh');
  })
  .then((hasil) => {
    console.log('✅', hasil);
  })
  .catch((error) => {
    console.error('❌', error);
  })
  .finally(() => {
    console.log('Selesai.');
  });

Penjelasan Kode

Baris 2-12: Buat Promise dengan resolve/reject. Baris 15-27: Chain .then(), .catch(), .finally().

Prompt AI

Jelaskan bedanya Promise.resolve() dan Promise.reject(). Apa kegunaan Promise.all()?

Pertanyaan Reflektif

Ubah kode callback hell menjadi Promise. Apakah lebih mudah dibaca?