Cara Memanggil API dengan Fetch API di JavaScript

Cara Memanggil API dengan Fetch API di JavaScript

Banba
Cara Memanggil API dengan Fetch API di JavaScript

API merupakan kepanjangan dari Application Programming Interface yang digunakan untuk menghubungkan antara satu aplikasi dengan aplikasi lainnya.

Pada JavaScript, ada beberapa cara untuk memanggil API. Seperti menggunakan XMLHttpRequest, AJAX milik JQuery, Axios, dan Fecth API.

Pada kesempatan kali ini, saya akan menjelaskan cara menggunakan Fetch API di JavaScript. Namun sebelumnya, mari kita ketahui dulu apa itu Fetch API.

Apa itu Fetch API?

Fetch API merupakan sebuah method yang digunakan untuk memanggil API. Method ini hampir sama dengan XMLHttpRequest, tapi method ini menyediakan fitur yang lebih bagus.

Method fetch() memiliki beberapa argumen. Lihat kode berikut ini:

js
var response = fetch(url, { options });
  • url - Argumen ini diisi dengan URL dari API yang dituju.
  • options - Diisi dengan options yang ada pada method fetch() ini.

Contoh penggunaan Fetch API dan options-nya.

js
var postData = async () => {
  var response = await fetch(url_api, {
    method: "POST", // Bisa diisi dengan *GET, POST, PUT, DELETE, dll.
    mode: "cors", // Bisa diisi dengan no-cors, *cors, same-origin.
    cache: "no-cache", // Bisa diisi dengan *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // Bisa diisi dengan include, *same-origin, omit
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
    }, // Jenis Headers untuk data yang akan dikirim
    redirect: "follow", // Bisa diisi dengan manual, *follow, error
    referrerPolicy: "no-referrer", // Bisa diisi dengan no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify({
      firstName: "Banba",
      lastName: "Zenji",
    }), // Data yang akan dikirim ke Database melalui API
  });

  return response.json();
};

// Keterangan:
// * nilai default

Itu dia sedikit penjelasan dan pengenalan mengenai apa itu Fetch API. Untuk penjelasan lebih lengkapnya silahkan baca artikel berikut ini - Fetch API.

Sekarang, kita lanjut ke cara memanggil API-nya.

Memanggil API dengan Fetch API

Sebelum menggunakan Fetch API, kamu harus paham mengenai HTTP Request. Contoh dari HTTP Request yaitu GET, POST, PUT, DELETE dan lain sebagainya.

Jika kamu sudah paham mengenai HTTP Request, selanjutnya kamu harus membaca dokumentasi dari API yang akan kamu gunakan.

Seperti contoh, disini kita akan menggunakan API Public dari situs TVmaze. Dimana API ini menyediakan berbagai informasi dari film, series, dan acara tv.

Menggunakan Fetch API

- Pertama buat file index.html lalu masukkan kode berikut ini.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fetch API</title>
  </head>
  <body>
    <main class="main-wrap">
      <ul class="tv-list" id="tv-list">
        <!-- TV Shows list -->
      </ul>
    </main>

    <script src="./script.js"></script>
  </body>
</html>

- Setelah itu, buat file script.js dan buat variable URL untuk menyimpan URL dari API kita.

js
var URL = "https://api.tvmaze.com/shows";

- Kemudian, kita buat sebuah function untuk mengambil data dari API-nya. Oh iya, sebenarnya terdapat dua cara yang biasa saya gunakan untuk menggunakan method fetch() ini. Yaitu, dengan menggunakan function asynchronous dan promise. Saya akan berikan kedua contohnya.

- Disini saya akan berikan kedua contohnya. Baik, pertama dengan function asynchronous. Silahkan buat function asynchronous (Kamu tahu kan apa itu function asynchronous?). Silahkan perhatikan contoh berikut ini.

- function asynchronous

js
var URL = "https://api.tvmaze.com/shows";

var getData = async () => {
  try {
    var response = await fetch(URL);
    console.log(await response.json());
  } catch (error) {
    console.error(error.message);
  }
};

window.onload = getData();

- promise

js
var URL = "https://api.tvmaze.com/shows";

var getData = () => {
  fetch(URL)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });
};

window.onload = getData();

- Kedua kode tersebut, jika dilihat pada tab Console di Browser akan memunculkan data dari API yang sudah kita panggil. Ya, kita sudah berhasil memanggil API dengan Fetch API.

Cara Memanggil API dengan Fetch API di JavaScript
Console log dari response API

- Sekarang, mari kita tampilkan data yang sudah kita panggil agar bisa muncul pada tampilan html. Kita tulis ulang kode tadi menggunakan function asynchronous sehingga menjadi seperti ini.

js
var URL = "https://api.tvmaze.com/shows";
var tvList = document.getElementById("tv-list");

var getData = async () => {
  try {
    var response = await fetch(URL);
    if (response.ok) {
      var data = await response.json();

      data.forEach((elem) => {
        var li = document.createElement("li");
        li.innerHTML = elem.name;

        tvList.appendChild(li);
      });
    }
  } catch (error) {
    console.error(error.message);
  }
};

window.onload = getData();

- Jika kamu lihat pada Browser kamu, maka akan muncul semua nama dari film atau series yang terdapat pada API TVmaze.

Cara Memanggil API dengan Fetch API di JavaScript
Data yang ditampilan setelah dirender ke HTML

Bagaimana, mudah bukan.

Perlu kamu ingat, kode di atas hanya untuk mengambil data dari API saja. Tidak berlaku untuk mengirim data ke Database melalui API. Untuk melakukan itu, seperti melakukan Fetch API ke method POST, PUT, DELETE. Kamu bisa menggunakan argumen options. Lihat contoh berikut ini, untuk melakukan POST data ke Database lewat API.

POST data menggunakan Fetch API

js
var postData = async () => {
  try {
    await fetch(url_api, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        username: "banba",
        password: "akusayangkira", // hehe
      }),
    });
  } catch (error) {
    console.error(error);
  }
};

Dan kode tersebut bisa kamu jalankan saat tombol submit ditekan. Untuk mengubah data atau menghapus data, kamu juga bisa menggunakan kode di atas namun dengan beberapa perubahan tentunya. Silahkan saja cari referensi lain di internet. Karena saya cuman memberikan cara dasar penggunaan Fetch API.

Penutupan

Bagaimana, mudah bukan untuk memanggil Fetch API. Jika kamu rasa ada yang kurang jelas, silahkan tanyakan saja lewat kolom komentar. Baiklah, mungkin itu saja untuk artikel kali ini. Terimakasih sudah berkunjung dan semoga bermanfaat.

Related articles

Comments