Belajar Async Await: Biar Kode JavaScript-mu Gak Kusut Lagi!

Di artikel sebelumnya, kita udah bahas gimana cara ambil data dari server pakai AJAX dan Fetch API. Tapi, jujur aja pakai .then() berlapis itu kadang bikin kepala cenat-cenut. Nah, sekarang kita bakal belajar senjata pamungkas JavaScript modern: Async/Await. Tujuannya? Biar kode asinkron kamu tetap rapi, enak dibaca, dan makin siap nyemplung ke dunia framework kayak React!

Kenapa Perlu Async/Await?

Kalau pakai chaining .then() terlalu banyak, alur kode jadi susah diikuti. Contohnya begini:

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Dengan async/await, kode jadi lebih bersih:

async function ambilData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('Error:', err);
  }
}

Contoh Mini Project: Tampilkan Postingan dari API

HTML:

<button id="btn">Tampilkan Post</button>
<ul id="list"></ul>

JavaScript:

const tombol = document.getElementById('btn');
const list = document.getElementById('list');

tombol.addEventListener('click', async () => {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    const posts = await res.json();
    list.innerHTML = posts.map(p => `<li>${p.title}</li>`).join('');
  } catch (err) {
    list.innerHTML = '<li>Gagal ambil data!</li>';
  }
});

Kenapa Ini Penting Sebelum Masuk React?

Di React, kita sering banget ambil data pakai async function dalam useEffect. Misalnya:

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/info');
    const data = await res.json();
    setData(data);
  };

  fetchData();
}, []);

Makanya, paham konsep async/await di JavaScript adalah fondasi penting sebelum ngoding di React!

Async/Await bikin proses asynchronous di JavaScript jauh lebih readable dan maintainable. Setelah ini, kamu bakal jauh lebih pede ngoding API call di React. Di artikel selanjutnya, kita bakal mulai belajar React dari nol, mulai dari component, props, sampai state.

Sampai jumpa di artikel berikutnya, dan seperti biasa jangan berhenti ngoding! 👨‍💻🔥