Fetch API

Last updated 2 years ago

Was this helpful?

Fetch API

1. Permasalahan

Dalam membuat suatu program kita terbiasa membuat variable untuk tempat menyimpan data, namun jika kita melakukan refresh pada aplikasi kita data yang kita ubah nilainya melalui aplikasi akan kembali seperti semula. Hal ini terjadi karena variable disimpan ke tempat penyimpanan sementara (RAM). Untuk menyimpan data secara permanen, kita perlu menyimpan data tersebut ke storage yang ada pada backend

2. Pengertian

Fecth Api merupakan fitur yang ada pada javascript yang berfungsi sebagai alat penghubung data dari backend agar dapat diolah oleh frontend.

untuk mengolah data dari backend maka kita perlu memahami API (Application Programming Interface) terlebih dahulu, API merupakan bentuk data yang telah dibuat oleh backend agar frontend bisa mengolah data tersebut.

Contoh Data API

3. Detail Materi

pada dasarnya Fetch API sendiri memiliki beberapa perintah yaitu :

GET : Mengambil data dari backend
POST : Mengirim data ke backend
PUT : Mengubah data di backend
DELETE : Menghapus data di backend

3.1. Penerapan

Get

1| fetch('Url_api_yang_ingin_diakses', {
2|    method: 'GET' //perintah
3| }).then(res => res.json())
4|    .then(data => console.log(data));

// pada baris 2 isikan dengan perintah seperti diatas
// pada baris 3 kembalikan hasil res menjadi json
// pada baris 4 lakukan print data untuk mengetahui hasilnya

Post

untuk post memiliki sedikit perbedaan sebagai berikut :

1 |   fetch('Url_api_yang_ingin_diakses', {
2 |       method: 'POST' //perintah
3 |       headers: {
4 |           'Content-Type': 'application/json'
5 |       }
6 |       body : {
7 |         "key_data" : value
8 |       }
9 |   }).then(res => res.json())
10|        .then(data => console.log(data));

// pada baris 2 isikan dengan perintah seperti diatas
// pada baris 4 kita gunakan untuk mengatur format pengiriman disini kita menggunakan json
// pada baris 6 untuk isi dari body ini ditentukan dari endpoint yang telah dibuat
// pada baris 9 kembalikan hasil res menjadi json
// pada baris 10 lakukan print data untuk mengetahui hasilnya

4. Contoh Kasus

pada percobaan kali ini kita akan melakukan implementasi Fecth Api Javascript

Langkah Pengerjaan

Pertama buat file baru yaitu file.html file ini dibuat untuk menampilkan hasil data yang kita buat

<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h2>Belajar Fetch Api</h2>
    <script src="index.js"></script>
  </body>
</html>

Kedua kita perlu membuat file baru yaitu file.js untuk melakukan percobaan Fecth API,

GET

fetch('https://aka-contact-backend.herokuapp.com/contact', {
  method: 'GET',
})
  .then((res) => res.json())
  .then((data) => console.log(data))

langkah berikutnya jalankan file html pada browser lalu click kanan pada browser pilih inspect element, lalu pilih kolom console untuk melihat hasil dari script yang telah kita buat

Hasil

POST

untuk percobaan ini kita masih menggunakan file yang sama,namun akan ada sedikit perbedaan format pada file.js

fetch('https://aka-contact-backend.herokuapp.com/contact', {
  method: 'Post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Robert Dasilva',
    phone: '082312321321',
  }),
})
  .then((res) => {
    return res.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log('ERROR'))

langkah berikutnya jalankan file html pada browser lalu click kanan pada browser pilih inspect element, lalu pilih kolom console untuk melihat hasil dari script yang telah kita buat

Hasil

untuk melakukan pengecekan data yang telah kita kirim kita dapat menjalankan kembali fungsi get yang telah kita buat sebelumnya, atau kita juga melihat hasil yang kita buat tadi dengan menggunakan aplikasi yaitu :

Postman : https://www.postman.com/downloads/
Insomnia : https://insomnia.rest/download/

PreviousEvent NextObject JavaScript

Last updated 2 years ago

Was this helpful?

1. Permasalahan

2. Pengertian

Fecth Api merupakan fitur yang ada pada javascript yang berfungsi sebagai alat penghubung data dari backend agar dapat diolah oleh frontend.

Contoh Data API

3. Detail Materi

pada dasarnya Fetch API sendiri memiliki beberapa perintah yaitu :

GET : Mengambil data dari backend
POST : Mengirim data ke backend
PUT : Mengubah data di backend
DELETE : Menghapus data di backend

3.1. Penerapan

Get

1| fetch('Url_api_yang_ingin_diakses', {
2|    method: 'GET' //perintah
3| }).then(res => res.json())
4|    .then(data => console.log(data));

// pada baris 2 isikan dengan perintah seperti diatas
// pada baris 3 kembalikan hasil res menjadi json
// pada baris 4 lakukan print data untuk mengetahui hasilnya

Post

untuk post memiliki sedikit perbedaan sebagai berikut :

1 |   fetch('Url_api_yang_ingin_diakses', {
2 |       method: 'POST' //perintah
3 |       headers: {
4 |           'Content-Type': 'application/json'
5 |       }
6 |       body : {
7 |         "key_data" : value
8 |       }
9 |   }).then(res => res.json())
10|        .then(data => console.log(data));

// pada baris 2 isikan dengan perintah seperti diatas
// pada baris 4 kita gunakan untuk mengatur format pengiriman disini kita menggunakan json
// pada baris 6 untuk isi dari body ini ditentukan dari endpoint yang telah dibuat
// pada baris 9 kembalikan hasil res menjadi json
// pada baris 10 lakukan print data untuk mengetahui hasilnya

4. Contoh Kasus

pada percobaan kali ini kita akan melakukan implementasi Fecth Api Javascript

Langkah Pengerjaan

Pertama buat file baru yaitu file.html file ini dibuat untuk menampilkan hasil data yang kita buat

<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h2>Belajar Fetch Api</h2>
    <script src="index.js"></script>
  </body>
</html>

Kedua kita perlu membuat file baru yaitu file.js untuk melakukan percobaan Fecth API,

GET

fetch('https://aka-contact-backend.herokuapp.com/contact', {
  method: 'GET',
})
  .then((res) => res.json())
  .then((data) => console.log(data))

langkah berikutnya jalankan file html pada browser lalu click kanan pada browser pilih inspect element, lalu pilih kolom console untuk melihat hasil dari script yang telah kita buat

Hasil

POST

untuk percobaan ini kita masih menggunakan file yang sama,namun akan ada sedikit perbedaan format pada file.js

fetch('https://aka-contact-backend.herokuapp.com/contact', {
  method: 'Post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Robert Dasilva',
    phone: '082312321321',
  }),
})
  .then((res) => {
    return res.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log('ERROR'))

langkah berikutnya jalankan file html pada browser lalu click kanan pada browser pilih inspect element, lalu pilih kolom console untuk melihat hasil dari script yang telah kita buat

Hasil

Postman : https://www.postman.com/downloads/
Insomnia : https://insomnia.rest/download/