Pengantar fetch()

fetch() memungkinkan Anda membuat permintaan jaringan yang mirip dengan XMLHttpRequest (XHR). Perbedaan utama adalah Fetch API menggunakan Promise, yang memiliki API yang lebih sederhana untuk membantu Anda menghindari callback yang rumit di XMLHttpRequest API.

Jika Anda belum pernah menggunakan Promise, baca artikel Pengantar Promise JavaScript.

Permintaan Pengambilan Dasar

Berikut adalah contoh yang diimplementasikan dengan XMLHttpRequest, lalu dengan fetch. Kita ingin meminta URL, mendapatkan respons, dan mengurainya sebagai JSON.

XMLHttpRequest

XMLHttpRequest memerlukan dua pemroses untuk menangani kasus berhasil dan error, serta panggilan ke open() dan send(). Contoh dari dokumen MDN.

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

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

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

Ambil

Permintaan pengambilan kita akan terlihat seperti ini:

fetch('./api/some.json')
  .then(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(err => {
    console.log('Fetch Error :-S', err);
  });

Permintaan fetch() hanya memerlukan satu panggilan untuk melakukan pekerjaan yang sama seperti contoh XHR. Untuk memproses respons, pertama-tama kita memeriksa apakah status responsnya adalah 200, lalu mengurai respons sebagai JSON. Respons terhadap permintaan fetch() adalah objek Stream, yang berarti bahwa setelah kita memanggil metode json(), Promise akan ditampilkan. Streaming terjadi secara asinkron.

Metadata Respons

Contoh sebelumnya menunjukkan status objek Response, dan cara menguraikan respons sebagai JSON. Berikut cara menangani metadata lain yang mungkin ingin Anda akses, seperti header:

fetch('users.json').then(response => {
  console.log(response.headers.get('Content-Type'));
  console.log(response.headers.get('Date'));

  console.log(response.status);
  console.log(response.statusText);
  console.log(response.type);
  console.log(response.url);
});

Jenis Respons

Saat kita membuat permintaan pengambilan, respons akan diberi response.type "basic", "cors", atau "opaque". types ini menunjukkan asal resource, dan Anda dapat menggunakannya untuk menentukan cara memperlakukan objek respons.

Saat browser meminta resource dengan asal yang sama, respons memiliki jenis basic dengan batasan apa yang dapat Anda lihat dari respons.

Jika permintaan dibuat untuk resource di origin lain, dan origin tersebut menampilkan header COR, jenisnya adalah cors. Respons cors mirip dengan respons basic, tetapi membatasi header yang dapat Anda lihat ke Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, dan Pragma.

Respons opaque berasal dari asal berbeda yang tidak menampilkan header CORS. Dengan respons buram, kita tidak akan dapat membaca data yang ditampilkan atau melihat status permintaan, yang berarti Anda tidak dapat memeriksa apakah permintaan berhasil atau tidak.

Anda dapat menentukan mode untuk permintaan pengambilan sehingga hanya jenis permintaan tertentu yang di-resolve. Mode yang dapat Anda tetapkan adalah sebagai berikut:

• same-origin hanya berhasil permintaan aset dengan asal yang sama, dan menolak semua permintaan lainnya.
• cors memungkinkan permintaan untuk aset pada asal yang sama dan origin lain yang menampilkan header COR yang sesuai.
• cors-with-forced-preflight melakukan pemeriksaan preflight sebelum membuat permintaan apa pun.
• no-cors dimaksudkan untuk membuat permintaan ke origin lain yang tidak memiliki header CORS dan menghasilkan respons opaque, tetapi seperti yang dinyatakan, hal ini tidak mungkin dalam cakupan global jendela saat ini.

Untuk menentukan mode, tambahkan objek opsi sebagai parameter kedua dalam permintaan fetch dan tentukan mode dalam objek tersebut:

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

Perantaian promise

Salah satu fitur hebat dari promise adalah kemampuan untuk menggabungkannya. Untuk fetch(), hal ini memungkinkan Anda membagikan logika ke seluruh permintaan pengambilan.

Jika menggunakan JSON API, Anda perlu memeriksa status dan mengurai JSON untuk setiap respons. Anda dapat menyederhanakan kode dengan menentukan status dan penguraian JSON dalam fungsi terpisah yang menampilkan promise, dan menggunakan permintaan pengambilan untuk hanya menangani data akhir dan kasus error.

function status (response) {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
  } else {
    return Promise.reject(new Error(response.statusText))
  }
}

function json (response) {
  return response.json()
}

fetch('users.json')
  .then(status)
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  }).catch(error => {
    console.log('Request failed', error);
  });

Contoh ini menentukan fungsi status yang memeriksa response.status dan menampilkan Promise yang diselesaikan sebagai Promise.resolve(), atau Promise yang ditolak sebagai Promise.reject(). Ini adalah metode pertama yang dipanggil dalam rantai fetch().

Jika Promise selesai, skrip kemudian memanggil metode json(), yang menampilkan Promise kedua dari panggilan response.json() dan membuat objek yang berisi JSON yang diurai. Jika penguraian gagal, Promise akan ditolak dan pernyataan catch akan dijalankan.

Struktur ini memungkinkan Anda membagikan logika ke semua permintaan pengambilan, sehingga kode lebih mudah dikelola, dibaca, dan diuji.

Permintaan POST

Terkadang aplikasi web perlu memanggil API dengan metode POST dan menyertakan beberapa parameter dalam isi permintaan. Untuk melakukannya, tetapkan parameter method dan body dalam opsi fetch():

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  })
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(error => {
    console.log('Request failed', error);
  });

Mengirim kredensial dengan permintaan pengambilan

Untuk membuat permintaan pengambilan dengan kredensial seperti cookie, tetapkan nilai credentials permintaan ke "include":

fetch(url, {
  credentials: 'include'
})