Async/Await: Kode Asinkron yang Terlihat Sinkron

Syntax modern untuk menulis kode asinkron

Tujuan Pembelajaran

Memahami syntax async/await
Bisa mengubah Promise menjadi async/await

Analogi

Diagram


      Callback = Surat (Lama, tunggu balasan)
Promise = Telepon ('Nanti saya hubungi')
Async/Await = Video Call (Langsung real-time)

Async/await membuat kode asinkron terasa seperti kode biasa

Penjelasan Konsep

Sebelum Flexbox ada, membuat layout di CSS sangat sulit. Developer harus menggunakan float (yang sebenarnya untuk teks mengelilingi gambar), clearfix hacks, position absolute/relative yang membingungkan, dan table layout yang tidak fleksibel. Membuat sesuatu yang sederhana seperti “tiga kolom dengan tinggi sama” atau “tombol di tengah halaman” bisa memakan waktu berjam-jam dan puluhan baris CSS.

Lalu Flexbox hadir di tahun 2009 dan mengubah segalanya.

Flexbox (Flexible Box Layout) adalah sistem layout satu dimensi yang membuat penyusunan elemen menjadi sangat mudah dan intuitif. Dengan Flexbox, kamu bisa membuat layout kompleks hanya dengan beberapa baris CSS.

Flexbox dirancang khusus untuk layout komponen dan penyusunan item dalam satu baris atau kolom — sempurna untuk navigasi,

Card layouts, form alignment, dan centering.

Konsep Dasar Flexbox

Ada dua entitas dalam Flexbox:

Flex Container — Elemen induk yang diberi display: flex.

Ini adalah “ruang tunggu bank” tempat item-item disusun.

Flex Items — Elemen anak langsung dari flex container.

Ini adalah “orang-orang di antrean.”

Property Flex Container (yang mengatur antrean)

display: flex — Mengaktifkan Flexbox pada elemen.

Setelah ini, semua anak langsung menjadi flex item.

flex-direction — Menentukan arah antrean:

row (default): Horizontal, kiri ke kanan
row-reverse: Horizontal, kanan ke kiri
column: Vertikal, atas ke bawah
column-reverse: Vertikal, bawah ke atas

justify-content — Menyusun item sepanjang main axis (arah flex-direction):

flex-start: Item rata kiri/atas (default)
flex-end: Item rata kanan/bawah
center: Item di tengah
space-between: Jarak merata,

Item ujung menempel container

space-around: Jarak merata termasuk di ujung (setengah ukuran)
space-evenly: Jarak merata termasuk di ujung (sama rata)

align-items — Menyusun item sepanjang cross axis (tegak lurus main axis):

stretch (default): Item meregang memenuhi container
flex-start: Item rata atas/kiris
flex-end: Item rata bawah/kanan
center: Item di tengah cross axis
baseline: Item sejajar pada teks baseline

flex-wrap — Mengatur apakah item boleh pindah baris kalau tidak muat:

nowrap (default): Semua item di satu baris (bisa overflow)
wrap: Item pindah baris baru kalau tidak muat
wrap-reverse: Sama seperti wrap tapi urutan baris dibalik

gap — Memberi jarak antar item.

Ini sangat memudahkan!

Sebelum gap ada, developer harus menggunakan margin dan mengatasi margin collapse.

Sekarang cukup gap: 16px; dan semua item punya jarak merata.

Property Flex Items (yang mengatur setiap orang)

flex-grow — Menentukan seberapa besar item “tumbuh” mengisi ruang kosong. Nilai 1 berarti item akan meregang mengisi ruang. Kalau semua item punya flex-grow: 1, mereka berbagi ruang sama rata.

flex-shrink — Menentukan seberapa besar item “menyusut” kalau ruang tidak cukup. Nilai 0 berarti item tidak akan menyusut.

flex-basis — Ukuran awal item sebelum flex-grow/flex-shrink diterapkan.

Bisa dalam px, %, rem, atau auto.

Shorthand: flex: 1 1 200px; berarti flex-grow: 1, flex-shrink: 1, flex-basis: 200px.

Atau flex: 1; untuk flex-grow: 1, flex-shrink: 1, flex-basis: 0%.

Kenapa Flexbox penting?

Karena Flexbox memecahkan masalah layout yang paling umum di web: centering (baik horizontal maupun vertical),

Navigation bars, equal-height columns, card layouts, form alignment, dan responsive layouts.

Dengan Flexbox, layout yang dulu membutuhkan hack-hack rumit sekarang bisa diselesaikan dengan 3-4 baris CSS yang bersih.

Contoh Kode

javascript

// ASYNC/AWAIT DASAR
async function prosesPesanan() {
  try {
    const nasiGoreng = await pesanMakanan('Nasi Goreng');
    console.log('✅', nasiGoreng);
    const esTeh = await pesanMakanan('Es Teh');
    console.log('✅', esTeh);
  } catch (error) {
    console.error('❌ Error:', error);
  }
}

// FETCH DENGAN ASYNC/AWAIT
async function ambilDataUser(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('Gagal:', error.message);
    return null;
  }
}

// PARALLEL REQUEST
async function ambilBanyakData() {
  const [users, products] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/products').then(r => r.json())
  ]);
  console.log({ users, products });
}

Penjelasan Kode

Baris 2-10: Async function dengan try/catch. Baris 13-24: Fetch dengan error handling. Baris 27-33: Promise.all untuk paralel request.

Prompt AI

Jelaskan bedanya await berurutan vs Promise.all(). Kapan menggunakan masing-masing?

Pertanyaan Reflektif

Refactor semua kode .then()/.catch() menjadi async/await. Mana yang lebih mudah dibaca?