Menguasai Fetch API dan Async/Await di JavaScript

Pendahuluan

Halo teman-teman developer! Senang sekali bisa bertemu kembali di artikel terakhir dalam seri pembuatan Aplikasi Kuis Interaktif. Jika pada artikel sebelumnya kita sudah belajar cara mengolah data pertanyaan menggunakan array methods seperti map, filter, dan reduce, sekarang saatnya kita masuk ke level berikutnya.

Selama ini, data pertanyaan kuis yang kita gunakan masih bersifat statis atau “hardcoded” di dalam file JavaScript kita. Bayangkan jika Anda ingin membuat aplikasi kuis skala besar seperti kuis berbayar di platform edukasi lokal. Tentu tidak mungkin Anda menulis ribuan pertanyaan secara manual di dalam kode program. Anda pasti ingin mengambil data tersebut dari sebuah server atau database eksternal agar aplikasi Anda lebih dinamis dan ringan.

Di artikel ini, kita akan mempelajari dua teknologi kunci dalam JavaScript modern: Fetch API dan Async/Await. Kita akan belajar bagaimana cara “menjemput” data dari internet (API) dan menampilkannya ke dalam aplikasi kuis kita. Dengan menguasai teknik ini, aplikasi Anda bukan lagi sekadar aplikasi sederhana, melainkan aplikasi yang mampu berinteraksi dengan dunia luar secara real-time.

Memahami Konsep Asynchronous dalam JavaScript

Sebelum kita menyentuh kode, kita harus memahami satu konsep fundamental: Asynchronous.

Dalam JavaScript, secara default, kode dijalankan baris demi baris secara berurutan (Synchronous). Masalah muncul ketika kita melakukan tugas yang membutuhkan waktu lama, seperti mengambil data dari server. Jika kita menggunakan cara sinkron, seluruh aplikasi web Anda akan “membeku” atau freeze (tidak bisa diklik sama sekali) sampai data dari server selesai diunduh. Ini akan memberikan pengalaman pengguna yang buruk, seperti saat Anda sedang menggunakan aplikasi Gojek dan tiba-tiba layar tidak bisa digerakkan karena sedang menunggu data lokasi.

Untuk mengatasi ini, JavaScript menggunakan konsep Asynchronous. Dengan asynchronous, kita bisa memerintahkan JavaScript untuk “tolong ambilkan data ini di latar belakang, dan kabari saya jika sudah selesai, sementara saya tetap menjalankan kode lainnya.”

Ada dua cara utama untuk menangani proses ini di JavaScript modern: menggunakan Promises (melalui .then()) atau menggunakan sintaks yang lebih bersih, yaitu Async/Await.

Mengenal Fetch API

Fetch API adalah antarmanda (interface) modern yang disediakan oleh browser untuk melakukan permintaan jaringan (network request). Fetch API bekerja berdasarkan Promise. Sebuah Promise adalah sebuah objek yang mewakili keberhasilan atau kegagalan dari sebuah operasi asinkron.

Mari kita lihat contoh sederhana bagaimana cara menggunakan fetch untuk mengambil data dari sebuah URL. Kita akan berpura-pura mengambil data profil seorang pengguna bernama Budi.

// Contoh dasar menggunakan Fetch API dengan .then()
function ambilDataUser() {
  // Kita melakukan request ke URL API
  fetch('https://jsonplaceholder.typicode.com/users/1')
    .then((response) => {
      // Langkah 1: Memeriksa apakah respon dari server berhasil
      if (!response.ok) {
        throw new Error('Gagal mengambil data dari server');
      }
      // Langkah 2: Mengubah respon mentah menjadi format JSON yang bisa dibaca
      return response.json();
    })
    .then((data) => {
      // Langkah 3: Menggunakan data yang sudah berhasil dikonversi
      console.log("Data berhasil diambil:", data.name); // Output: Leanne Graham
    })
    .catch((error) => {
      // Langkah 4: Menangani jika terjadi error (misal: internet mati)
      console.error("Terjadi kesalahan:", error.message);
    });
}

ambilDataUser();

Dalam kode di atas, ada dua tahap penting. Pertama, kita mendapatkan response dari server. Namun, data tersebut masih dalam bentuk aliran data mentah (raw stream). Kita perlu memanggil method .json() untuk mengubahnya menjadi objek JavaScript yang bisa kita manipulasi. Inilah mengapa kita membutuhkan .then() kedua.

Menyederhanakan Kode dengan Async/Await

Meskipun penggunaan .then() sudah benar, jika kita memiliki banyak request yang berurutan, kode kita akan mengalami “Callback Hell” atau struktur kode yang menjorok ke dalam dan sulit dibaca. Di sinilah Async/Await berperan sebagai pahlawan.

Async/Await adalah syntactic sugar di atas Promise. Ia membuat kode asinkron terlihat dan berperilument seperti kode sinkron, sehingga jauh lebih mudah dibaca dan dikelola.

Perhatikan perbandingan kode di bawah ini:

// Menggunakan Async/Await (Lebih bersih dan mudah dibaca)
async function ambilDataUserModern() {
  try {
    // 'await' akan memberitahu JS untuk menunggu sampai fetch selesai
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');

    // Cek apakah response sukses (status 200-299)
    if (!response.ok) {
      throw new Error(`Error HTTP! Status: ${response.status}`);
    }

    // Tunggu proses konversi JSON selesai
    const data = await response.json();

    // Sekarang kita bisa langsung menggunakan datanya
    console.log(`Halo, nama user adalah: ${data.name}`);
    console.log(`Email: ${data.email}`);
  } catch (error) {
    // Menangani semua jenis error di satu tempat
    console.error("Waduh, ada masalah saat ambil data:", error.message);
  }
}

ambilDataUserModern();

Dengan async/await, kita menggunakan blok try...catch untuk menangani error. Ini jauh lebih intuitif bagi developer karena polanya sama dengan penanganan error pada kode sinkron biasa.

Implementasi dalam Proyek: Aplikasi Kuis Interaktif

Sekarang, mari kita terapkan ilmu ini ke proyek utama kita: Aplikasi Kuis Interaktif. Kita akan mengubah sumber pertanyaan dari array lokal menjadi pengambilan data dari API eksternal.

Sebagai contoh, kita akan menggunakan API publik untuk mengambil data. Dalam skenario nyata, Anda mungkin akan mengambil data dari API buatan sendiri yang berisi pertanyaan kuis tentang sejarah Indonesia atau pengetahuan umum.

Berikut adalah implementasi fungsi utama untuk mengambil pertanyaan kuis:

// Elemen DOM kita (asumsi sudah ada di HTML)
const questionElement = document.getElementById('question');
const answerButtons = document.getElementById('answer-buttons');
const loadingElement = document.getElementById('loading');

// Fungsi utama untuk mengambil pertanyaan dari API
async function loadQuizQuestions() {
  // Tampilkan indikator loading agar user tahu proses sedang berjalan
  loadingElement.style.display = 'block';
  
  try {
    // Kita menggunakan API placeholder untuk simulasi data kuis
    // Dalam proyek asli, ini adalah URL API kuis Anda
    const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');

    if (!response.ok) {
      throw new Error('Gagal mengambil pertanyaan kuis.');
    }

    const posts = await response.json();

    // Kita transformasikan data API menjadi format kuis kita
    // Kita asumsikan 'title' dari API adalah pertanyaan kuis
    const quizData = posts.map(post => ({
      question: post.title,
      answers: [
        { text: 'Jawaban A', correct: true },
        { text: 'Jawaban B', correct: false },
        { text: 'Jawaban C', correct: false }
      ]
    }));

    // Panggil fungsi untuk memulai kuis dengan data yang baru diambil
    startQuiz(quizData);

  } catch (error) {
    // Jika gagal (misal: koneksi internet di kafe sedang gangguan)
    questionElement.innerText = "Maaf, gagal memuat kuis. Silakan cek koneksi internet Anda.";
    console.error("Error Load Quiz:", error);
  } finally {
    // Sembunyikan loading apapun hasilnya (berhasil atau gagal)
    loadingElement.style.display = 'none';
  }
}

// Fungsi simulasi startQuiz (sudah kita buat di artikel sebelumnya)
function startQuiz(data) {
  console.log("Kuis dimulai dengan data:", data);
  // Logika menampilkan pertanyaan ke DOM akan ada di sini...
}

// Jalankan fungsi saat halaman dimuat
loadQuiz();

Dalam kode di atas, kita menggunakan blok try...catch untuk memastikan jika terjadi kegagalan jaringan (misalnya sinyal hilang), aplikasi kita tidak langsung crash, melainkan memberikan pesan yang ramah kepada pengguna.

Kesimpulan

Selamat! Anda baru saja mempelajari salah satu konsep paling krusial dalam pengembangan web modern: Asynchronous JavaScript. Anda sekarang tahu cara menggunakan fetch untuk mengambil data dari server dan bagaimana menangani proses tersebut menggunakan async/await agar kode tetap rapi dan mudah dibaca.

Kemampuan mengambil data dari API adalah pintu gerbang untuk membuat aplikasi yang nyata, seperti aplikasi cuaca, aplikasi e-commerce, hingga media sosial. Teruslah berlatih dengan mencoba mengambil data dari API publik lainnya!

Tips Belajar Selanjutnya:

Cobalah mencari “Public API for testing” di Google untuk menemukan sumber data gratis.
Pelajari tentang POST request untuk belajar cara mengirim data dari aplikasi ke server (misalnya untuk fitur submit jawaban kuis).