Fetch API – SkillPlus

Fetch API adalah API untuk membuat network reques yang mirip dengan XMLHttpRequest (XHR). Perbedaan utama adalah bahwa Fetch API menggunakan Promise, hingga API lebih sederhana dan mudah dibaca, menghindari call back hell, dan tidak perlu mengingat API XMLHttpRequest yang kompleks.

Perbandingan Antara XHR dan Fetch

//XMLHttpRequest

function reqListener() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError(err) {
  console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();


//fetch API
fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Respons Type

Ketika fetch request dibuat, response.type dapat berupa “basic”, “cors” atau “opaque”. Type ini mengindikasikan asal resource dan info ini digunakan untuk menangani response object.

Jika request dibuat pada same-origin, response akan berupa basic type dan tidak ada pembatasan terhadap response object.

Jika request dibuat pada another-origin, akan mengembalikan CORs headers, maka Respons type adalahcors. cors dan basic hampir mirip, kecuali cors response membatasi header yang dapat dibaca, yaitu Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, and Pragma.

Opaque response adalah request pada different-origin yang tidak mengembalikan CORS headers. Opaque response tidak dapat dibaca data yang dikembalikan, atau melihat status request, yang berarti kita tidak dapat memeriksa apakah request berhasil atau gagal.

Kita dapat mengatur mode dari fetch untuk memastikan hasil resolve yang sesuai dengan mode tersebut yang dikembalikan.

same-origin, hanya untuk requests pada same origin, request lainnya akan dibatalkan.
cors, request pada same-origin dan other origins yang mengambalikan CORs headers.
cors-with-forced-preflight akan melakukan preflight check sebelum melakukan request.
no-cors, untuk request pada other origins yang tidak memiliki CORS headers dan response berupa opaque response, pada saat ini, belum dapat dilakuka pada window global scope.

Contoh menggunakan mode pada fetch

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log('Request successful', text);
  })
  .catch(function(error) {
    log('Request failed', error)
  });

GET Request

Untuk mempermudah, kita akan menggunakan https://httpbin.org/ untuk melakukan request. Pada contoh yang digunakan adalah untuk mendapatkan alamat IP address requesters (kita). Dari dokumentasi httpbin.org, kita dapat lihat response akan berupa JSON.

fetch('https://httpbin.org/ip')
  .then(function(response){
    return response.json();
  })
  .then(function(data){
    console.log(data);
  })
  .catch(function(err){
    console.log(err);
  });

{origin: "36.71.233.234, 36.71.233.234"}
origin: "36.71.233.234, 36.71.233.234"
__proto__: Object

POST request

Pada contoh kita kembali menggunakan httpbin.org untuk melakukan POST. Method bila tidak didefinisikan, default adalah GET. Selain method kita perlu mendefinisikan header content type property, untuk menginformasikan server, type data pada body. Terakhir adalah body, yaitu content yang akan kita POST.

Penting untuk mengikuti dokumentasi dari server penyedia API. Property harus disesuaikan dengan dokumentasi dari server.

fetch('https://httpbin.org/post', {
  method: 'POST',
  headers:{
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body:JSON.stringify({msg:'fetch with post'})
})
  .then(function(response){
    return response.json();
  })
  .then(function(data){
    console.log(data);
  })
  .catch(function(err){
    console.log(err);
  });

{args: {…}, data: "{"msg":"fetch with post"}", files: {…}, form: {…}, headers: {…}, …}

Untuk dokumentasi lebih detail silakan kunjungi site berikut

Sharing is caring: