Fetch API adalah antarmuka JavaScript modern yang digunakan untuk melakukan permintaan HTTP dari web browser. Dengan Fetch API, kita dapat mengambil sumber daya dari server, seperti data JSON, HTML, gambar, atau file lainnya, dengan cara yang lebih sederhana dibandingkan menggunakan teknik lama seperti XMLHttpRequest.

Keunggulan Fetch API

Fetch API menawarkan beberapa keunggulan dibandingkan XMLHttpRequest, antara lain:

• Promise-based: Fetch API menggunakan Promise, yang membuat kode menjadi lebih bersih dan mudah dibaca. Dengan Promise, kita dapat menggunakan method .then() dan .catch() untuk menangani hasil dari permintaan.
• Mendukung Asynchronous/Await: Dengan dukungan async dan await, kita bisa menulis kode asinkron secara lebih mudah dan menyerupai kode sinkron.
• Lebih fleksibel: Fetch API menyediakan lebih banyak fitur seperti pengaturan custom request, handling errors, serta kemampuan untuk melakukan streaming data besar.

Cara Menggunakan Fetch API

Untuk melakukan request menggunakan Fetch API, kita bisa memanfaatkan method fetch(), yang akan mengembalikan Promise. Berikut adalah contoh dasarnya:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Jaringan bermasalah');
    }
    return response.json(); // Mengubah data yang diterima menjadi JSON
  })
  .then(data => {
    console.log(data); // Menampilkan data yang diterima
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  });

Langkah-Langkah Penggunaan Fetch API

Melakukan Permintaan (Request)

Pada umumnya, Fetch API digunakan untuk mendapatkan data dengan metode GET. Namun, Fetch juga mendukung metode HTTP lain seperti POST, PUT, DELETE, dll.

Contoh Penggunaan GET:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json()) // Mengubah respon menjadi JSON
  .then(data => console.log(data))    // Menampilkan data di console
  .catch(error => console.error('Error:', error));

Contoh Penggunaan POST:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'Belajar Fetch API',
    body: 'Fetch API adalah API modern yang mudah digunakan',
    userId: 1,
  }),
})
  .then(response => response.json()) // Mengubah respons menjadi JSON
  .then(data => console.log(data))    // Menampilkan hasil data di console
  .catch(error => console.error('Error:', error));

Penanganan Kesalahan

Fetch API tidak secara otomatis melempar kesalahan untuk status HTTP seperti 404 atau 500. Untuk menangani ini, kita perlu memeriksa status dari response secara manual:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error! Status: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Terjadi kesalahan:', error));

Menggunakan Async/Await dengan Fetch API

Async/Await adalah cara yang lebih nyaman untuk menangani operasi asinkron, membuat kode lebih mudah dibaca. Berikut adalah contoh penggunaannya:

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('HTTP error! Status: ' + response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Terjadi kesalahan:', error);
  }
}

getData();

Kesimpulan

Fetch API memberikan cara yang lebih modern dan mudah untuk melakukan request HTTP dibandingkan dengan XMLHttpRequest. Dengan dukungan Promise dan async/await, pengembangan aplikasi web yang melakukan komunikasi dengan server menjadi lebih nyaman dan efisien. Menguasai Fetch API akan sangat membantu dalam mengembangkan aplikasi web modern yang dinamis.