Cara Ambil Data API atau Fetch API Javascript

Table of Contents

Javascript API Tutorial

Pada artikel ini saya kana menyediakan kode program dasar untuk melakukan baca data dari API atau ambil data atau Fetch API dengan Javascript. Untuk melakukan ini, saya akan menggunakan API dari Reqres dengan alamat https://reqres.in/api/users.

Secara default, alamat https://reqres.in/api/users jika diakses dengan browser akan mengembalikan data sebagai berikut:

Cara Ambil Data API atau Fetch API dengan Javascript

Nah, bagaimana caranya mengambil data tersebut dengan bahasa pemrograman Javascript.

Jadi, ada dua metode yang dapat kita gunakan yaitu Metode Fetch Then dan Async Await. Keduanya dapat mengembalikan data yang sama.

Persiapan Data

Disini, saya menyiapkan dua file yaitu index.html dan main.js, dimana index berisi kode program dasar html bisa namun kita import main.js kedalam index.html.

File index.html berisi sintax berikut:

<!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>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Sedangkan file main.js akan di isi kode program baik metode Fetch atau Async.

Metode Fetch Then

Jika kita menggunakan fetch() dimana didalamnya hanya ada alamat API, tanpa ada konfigurasi apa-apa, maka biasanya dia akan menggunakan method GET.

a. Kode Dasar

Untuk memudahkan kita, mari kita lihat Kode dasar dari metode Fetch API yang ada di file main.js adalah sebagai berikut:

const endpoint = "https://reqres.in/api/users"

fetch(endpoint)
.then((respon) => respon.json())
.then((data) => console.log(data))

Jika dilihat melalui console pada browser akan tampak hasilnya sebagai berikut:

b. Jika ingin mengembalikan data dengan Kondisi

Contoh diatas adalah contoh kasus dimana kita berhasil mengambil data melalui API. Namun bagaimana caranya jika kita ingin mengetahui status berhasil atau tidak dengan mengembalikan keterangan tertentu, maka kita perlu memodifikasi kode progam diatas sebagai contoh berikut:

const endpoint = "https://reqres.in/api/users";

fetch(endpoint)
.then((respon) => {
  if (respon.ok) {
    console.log("Sukses");
    respon.json()
    .then((data) => console.log(data));
  } else console.log("Gagal");
});

Maka hasilnya adalah sebagai berikut:

Metode Async Await

Satu cara lagi adalah dengan menggunakan metode Async dan Await, kode program dasarnya adalah sebagai berikut:

const endpoint = "https://reqres.in/api/users";

async function getData() {
  const respon = await fetch(endpoint);
  const data = await respon.json();
  console.log(data);
}

getData();

Maka hasil yang akan muncul di console browser adalah sebagai berikut, sama seperti metode fetch then diatas:

Semoga artikel Cara Ambil Data API atau Fetch API dengan Javascript ini bermanfaat.

Baca juga: