Asynchronous JavaScript dan Fetch · Basic JavaScript: Dari Nol sampai Proyek Pertama

Operasi jaringan membutuhkan waktu. JavaScript tidak harus menghentikan seluruh halaman sambil menunggu hasilnya.

Promise

Promise memiliki kondisi pending, fulfilled, atau rejected.

Code

const tunggu = new Promise(resolve => {
  setTimeout(() => resolve("Selesai"), 1000);
});

tunggu.then(hasil => console.log(hasil));

async dan await

await membuat kode asynchronous lebih mudah dibaca.

Code

async function ambilPengguna() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json();
}

Menangani error

Code

async function tampilkanPengguna() {
  try {
    const pengguna = await ambilPengguna();
    console.log(pengguna);
  } catch (error) {
    console.error("Gagal mengambil data:", error.message);
  }
}

tampilkanPengguna();

Selalu periksa response.ok; fetch tidak otomatis melempar error untuk respons HTTP 404 atau 500.

Loading state

Code

const status = document.querySelector("#status");

async function muatData() {
  status.textContent = "Memuat...";

  try {
    const data = await ambilPengguna();
    status.textContent = `Berhasil memuat ${data.length} pengguna`;
  } catch {
    status.textContent = "Data gagal dimuat";
  }
}

JSON

Code

const profil = { nama: "Ayu", aktif: true };
const teks = JSON.stringify(profil);
const objectKembali = JSON.parse(teks);

Latihan

Ambil daftar pengguna dari JSONPlaceholder, lalu tampilkan nama dan email ke dalam elemen ul. Tambahkan tampilan loading, pesan error, dan tombol untuk mencoba lagi.