Pengantar fetch()

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

Jika Anda belum pernah menggunakan Promise sebelumnya, lihat Pengantar Promise JavaScript.

Permintaan Pengambilan Dasar

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

XMLHttpRequest

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

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();

Ambil

Permintaan pengambilan kita akan terlihat seperti ini:

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);
  });

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

Metadata Respons

Contoh sebelumnya menunjukkan status Response, dan cara mengurai respons sebagai JSON. Berikut cara menangani {i>metadata <i}lain yang mungkin ingin untuk diakses, seperti {i>header<i}:

fetch('users.json').then(function(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 dari "basic", "cors" atau "opaque". types ini menunjukkan dari mana sumber daya berasal, dan Anda dapat menggunakannya untuk menentukan cara memperlakukan objek respons.

Saat browser meminta resource dengan asal yang sama, respons akan Jenis basic dengan batasan tentang apa yang dapat Anda lihat dari respons.

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

opaque respons berasal dari origin berbeda yang tidak menampilkan CORS {i>header<i}. Dengan respons buram, kita tidak dapat membaca data yang dikembalikan atau melihat status permintaan, yang berarti Anda tidak dapat memeriksa apakah permintaan berhasil atau tidak.

Anda dapat menetapkan mode untuk permintaan pengambilan sehingga hanya jenis permintaan tertentu diselesaikan. Mode yang dapat Anda tetapkan adalah sebagai berikut:

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

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

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)
    });

Perantaian promise

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

Jika menggunakan JSON API, Anda harus 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 pengambilan permintaan untuk hanya menangani data akhir dan kasus kesalahan saja.

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(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

Contoh ini menentukan fungsi status yang memeriksa response.status dan mengembalikan Promise yang telah 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 berisi JSON yang diurai. Jika penguraian gagal, Promise akan ditolak dan pernyataan {i>catch<i} dieksekusi.

Struktur ini memungkinkan Anda berbagi logika di semua permintaan pengambilan, sehingga kode menjadi lebih mudah dikelola, dibaca, dan diuji.

Permintaan POST

Terkadang aplikasi web perlu memanggil API dengan metode POST dan menyertakan beberapa dalam isi permintaan. Untuk melakukannya, setel method dan body parameter di 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(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

Mengirim kredensial dengan permintaan pengambilan

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

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