JavaScript Fetch: Cara menggunakan fungsi fetch () – Codewithaden

JavaScript Fetch memungkinkan Anda untuk membuat permintaan jaringan yang mirip dengan xmlhttpRequest (XHR). Perbedaan utama adalah bahwa JavaScript Fetch API menggunakan janji, memungkinkan API yang lebih mudah dan lebih bersih, menghindari neraka panggilan balik, dan mengingat API yang kompleks XmlHttpRequest

Meskipun kami juga dapat menggunakan sebuah Async-Await fitur ES7 untuk disingkirkan janji , dan itu akan berfungsi sebagai fungsi JavaScript sederhana, janji juga merupakan cara untuk mengirim permintaan dan menerima tanggapan.

Jika Anda tidak tahu janji apa, lihat tutorial berikut.

  1. Janji tolak
  2. Janji tekad
  3. Menjanjikan semua
  4. Perlombaan Janji

Dalam artikel ini, saya akan memberi Anda pengantar singkat tentang penggunaan API fetch di JavaScript.

Javascript fetch ()

Javascript fetch () adalah fungsi bawaan yang menyediakan antarmuka untuk mengambil sumber daya. Metode pengambilan hanya memiliki satu argumen wajib: URL sumber daya yang ingin Anda ambil. Menggunakan fetch (), kami dapat mengirim permintaan AJAX atau permintaan jaringan ke server mana pun dan mendapatkan respons JSON.

Kita semua ingat yang ditakuti XmlHttpRequest Kami menggunakan kembali pada hari itu untuk membuat permintaan; Itu melibatkan beberapa kode berantakan, itu tidak memberi kami janji, dan jujur saja, itu tidak cantik Javascript , Baik? Jika Anda menggunakan jQuery , Anda telah menggunakan sintaks pembersih dengan jQuery.ajax () . Sehat, Javascript Apakah itu sendiri dengan cara yang rapi sekarang.

Secara umum, kami menggunakan DAPATKAN dan POS Metode untuk mengirim permintaan jaringan ke server, mengambil respons, dan kemudian menampilkan respons itu dalam format yang tepat.

Sintaksis

let promise = fetch(URL, [options]) 

Parameter

Url : URL untuk mengakses.

pilihan : – Parameter opsional: Metode, header, dll.

Tanpa opsi, itu adalah permintaan GET sederhana, mengunduh isi URL.

Browser memulai permintaan segera dan mengembalikan janji yang harus digunakan kode panggilan untuk mendapatkan hasil akhir.

Mendapatkan respons biasanya merupakan proses dua tahap.

Pertama, janji, dikembalikan oleh fungsi fetch (), diselesaikan dengan objek kelas respons inbuilt segera setelah server merespons dengan header.

Pada tahap ini, kami dapat memeriksa status HTTP untuk melihat apakah itu berhasil atau tidak memeriksa header, tetapi kami belum memiliki tubuh.

Janji itu menolak jika fetch () tidak dapat membuat permintaan HTTP, mis., Masalah jaringan, atau tidak ada situs seperti itu.

Status HTTP abnormal, seperti 404 atau 500, tidak menyebabkan kesalahan.

Kita dapat melihat http-status sebagai properti respons:

  1. Status – Kode Status HTTP, mis., 200.
  2. OK-Boolean, benar jika kode status HTTP 200-299.

XmlHttpRequest

XmlHttpRequest akan membutuhkan dua pendengar untuk menangani kasus kesuksesan dan kesalahan dan panggilan untuk membuka () dan mengirim () fungsi.

Lihat kode berikut.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send(); 

Objek XMLHTTPREQUEST dapat meminta data dari server web.

Anda dapat melakukan hal -hal berikut.

  1. Perbarui halaman web tanpa memuat ulang halaman.
  2. Minta data dari server – setelah halaman dimuat.
  3. Menerima data dari server – setelah halaman dimuat.
  4. Kirim data ke server – di latar belakang.

Permintaan

SEBUAH Meminta Contoh mewakili bagian yang diminta dari javascript mengambil() panggilan metode. Melewati mengambil() Permintaan, Anda dapat membuat permintaan lanjutan dan disesuaikan:

  • metode – – DAPATKAN , POS TARUH , MENGHAPUS , KEPALA
  • url – URL permintaan
  • header – terkait Header obyek
  • pengirim – pengirim permintaan
  • mode – – CORS , no-cors Sama-Origin
  • kredensial – Haruskah cookie sesuai permintaan? menghilangkan , Sama-Origin
  • Redirect – – mengikuti , kesalahan manual
  • integritas – Nilai integritas subresource
  • cache – mode cache ( bawaan , Muat ulang tidak ada cache

Dapatkan permintaan di fetch ()

Secara langsung, yang Anda lakukan hanyalah memanggil Fetch dengan URL yang Anda inginkan; secara default, Fetch API menggunakan DAPATKAN Metode sehingga panggilan langsung akan seperti ini.

fetch('https://api.github.com/users/KrunalLathiya')
.then(response => response.json())
.then(data => {
  console.log(data) // Prints result from `response.json()` in getRequest
})
.catch(error => console.error(error)) 

Di sini, kami mendapat respons, dan responsnya adalah objek aliran, dan respons yang kami dapatkan bukan JSON tetapi sederhana Objek JavaScript Dengan serangkaian metode yang dapat kita gunakan lebih lanjut untuk memproses cara data yang kita inginkan.

  • klon() – Metode ini menyiratkan bahwa metode ini membuat klon respons.
  • json () – Metode ini menyelesaikan janji dengan JSON.
  • Redirect () – Metode ini menciptakan respons baru tetapi dengan URL yang berbeda.
  • teks() – Di dalam kasus , itu diselesaikan dengan string.
  • ArrayBuffer () – Di sini, kami mengembalikan janji yang diselesaikan dengan arraybuffer.
  • gumpal() – Ini adalah yang ditentukan dengan gumpalan.
  • formdata () – Ini juga mengembalikan janji tetapi menentukan dengan objek FormData.

Memuat JSON di JavaScript

Mari kita lihat bagaimana kita dapat mengekstrak data JSON dari respons itu setelah permintaan selesai:

fetch('https://api.github.com/users/KrunalLathiya')
.then(res => res.json())
.then(json => console.log(json)); 

Saat permintaan HTTP berakhir, kami mendapatkan janji Dengan data, dan kemudian kami menyelesaikan janji itu dengan JSON. Pertama, kami memulai permintaan dengan menelepon mengambil(), dan ketika janji itu terpenuhi, ia mengembalikan a Tanggapan objek, yang memperlihatkan a json metode.

Namun, metode javascript json () juga mengembalikan janji, yang berarti kita perlu rantai di yang lain kemudian() sebelum Json Respons dicatat ke konsol.

Metadata respons

Dalam contoh di atas, kita telah melihat status a Tanggapan objek dan cara menguraikan respons sebagai json. Selain itu, kita dapat mengakses header seperti metadata lainnya. Jadi kunjungi kode berikut.

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 kami membuat permintaan pengambilan, respons akan diberikan respons.type dari” dasar “” R “jenis ini menunjukkan dari mana sumber daya berasal dan dapat digunakan untuk menginformasikan bagaimana kita harus memperlakukan objek respons.

Ketika permintaan dibuat untuk sumber daya yang tepat, respons akan memiliki tipe dasar, dan tidak ada batasan pada apa yang dapat Anda lihat dari respons.

Jika permintaan dibuat untuk sumber daya pada asal lain, yang kembali Cors header , tipe CORS. Itu CORS dan tanggapan yang diperlukan hampir identik kecuali bahwa a CORS Respons membatasi header yang dapat Anda lihat untuk `cache-control`,` content-bahasa`, `tipe konten`,` kedaluwarsa`, `modifikasi terakhir`, dan` pragma`.

Sebuah buram Respons adalah untuk permintaan yang dibuat untuk sumber daya yang berbeda yang tidak mengembalikan header CORS. Dengan respons buram, kami tidak akan dapat membaca data yang dikembalikan atau melihat status permintaan, yang berarti kami tidak dapat memeriksa apakah permintaan itu berhasil atau tidak.

Anda dapat menentukan mode untuk permintaan pengambilan sehingga hanya permintaan spesifik yang akan diselesaikan. Mode yang dapat Anda atur adalah sebagai berikut:

  1. SEBUAH Sama-Origin Hanya berhasil untuk permintaan aset pada asal yang sama, dan semua permintaan lainnya akan menolak.
  2. Itu CORS akan mengizinkan permintaan aset pada asal-asal dan asal lain yang mengembalikan header CORS yang sesuai.
  3. Itu CORS-WITH-FORCED-PRIFLIGHT akan selalu melakukan a periksa preflight sebelum membuat permintaan yang sebenarnya.
  4. Itu no-cors dimaksudkan untuk membuat permintaan ke asal lain yang tidak memiliki header CORS dan menghasilkan buram , tetapi seperti yang dinyatakan, ini tidak mungkin dalam lingkup global jendela saat ini.

Jika kita ingin mendefinisikan mode, tambahkan objek opsi sebagai parameter kedua di mengambil meminta, dan mendefinisikan mode di objek itu.

// app.js

fetch('https://facebook.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)
  });
 

Meminta header

fetch('https://api.github.com/users/KrunalLathiya', {
  headers: new Headers({
    'User-agent': 'Mozilla/4.0 Custom User Agent'
  })
})
.then(response => response.json())
.then(data => {
  console.log(data)
})
.catch(error => console.error(error)) 

Kemampuan untuk mengatur header permintaan sangat penting untuk meminta fleksibilitas. Anda dapat bekerja dengan header permintaan dengan mengeksekusi header baru ():

// Create an empty Headers instance
let headers = new Headers();

// Add a few headers
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// Check, get, and set header values
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// Delete a header
headers.delete('X-My-Custom-Header');

// Add initial values
let headers = new Headers({
	'Content-Type': 'text/plain',
	'X-My-Custom-Header': 'CustomValue'
}); 

Anda dapat menggunakan Tambahkan memiliki , Dapatkan , mengatur , dan menghapus Metode untuk memodifikasi header permintaan.

Advanced: CORS Contoh

CORS terutama diperiksa di server untuk memastikan konfigurasi Anda benar di sisi server.

Itu kredensial Kontrol Opsi Jika cookie Anda disertakan secara otomatis.

fetch('https://api.github.com/users/KrunalLathiya', {
  credentials: 'include', // Useful for including session ID (and, IIRC, authorization headers)
})
.then(response => response.json())
.then(data => {
  console.log(data) // Prints result from `response.json()`
})
.catch(error => console.error(error)); 

Posting permintaan di fetch ()

postRequest('https://appdividend.com/api/v1/users', {user: 'Krunal'})
  .then(data => console.log(data)) // Result from the `response.json()` call
  .catch(error => console.error(error))

function postRequest(url, data) {
  return fetch(url, {
    credentials: 'same-origin', // 'include', default: 'omit'
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: JSON.stringify(data), // Coordinate the body type with 'Content-Type'
    headers: new Headers({
      'Content-Type': 'application/json'
    }),
  });
  .then(response => response.json())
} 

Di sini, kami telah membuat a Postrequest fungsi dan melewati dua parameter. Parameter pertama adalah permintaan, dan parameter kedua adalah data yang perlu disimpan di server.

Node fetch () contoh permintaan

Jika Anda menggunakan Node.js , Anda perlu menginstal versi node dari permintaan pengambilan yang disebut Node-Fetch. Beberapa modul ada di browser dan server node seperti konsol. Tetapi beberapa modul diinstal secara eksplisit untuk klien seperti mengambil secara default di browser, tetapi belum ada di node.js. Jadi kita perlu menginstalnya sebagai pihak ketiga. Contohnya di bawah ini.

// server.js

const fetch = require('node-fetch');

async function getGithubData()
{
  let data = await fetch('https://api.github.com/users/KrunalLathiya');
  let main = await data.json();
  console.log(main);
}

getGithubData(); 

Di sini, Anda bisa mendapatkan output seperti di bawah ini.

Javascript

Kami harus menghilangkan janji dalam contoh ini dan gunakan fitur ES7 terbaru yang disebut Async-Await. Fungsi async didukung di browser modern (bukan yaitu atau opera mini) dan node.js 7.6+. Jadi, kami telah menggunakan async-aak di node.js

Mengunggah file menggunakan permintaan fetch

postFile('https://appdividend.com/api/v1/users', 'input[type="file"].avatar')
  .then(data => console.log(data))
  .catch(error => console.error(error))

function postFile(url, fileSelector) {
  const formData = new FormData()
  const fileField = document.querySelector(fileSelector)
  
  formData.append('username', 'abc123')
  formData.append('avatar', fileField.files[0])

  return fetch(url, {
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: formData  // Coordinate the body type with 'Content-Type'
  })
  .then(response => response.json())
} 

Di sini, kami hanya meneruskan referensi ke bidang file dan menambahkan file itu ke Formdata, dan mengirim permintaan posting ke server.

Mengunggah beberapa file

Siapkan elemen unggahan file dengan banyak Atribut:

 

Kemudian gunakan dengan sesuatu seperti:

postFile('https://appdividend.com/api/v1/users', 'input[type="file"].files')
  .then(data => console.log(data))
  .catch(error => console.error(error))

function postFile(url, fileSelector) {
  const formData = new FormData()
  const fileFields = document.querySelectorAll(fileSelector)

  // Add all files to formData
  Array.prototype.forEach.call(fileFields.files, f => formData.append('files', f))
  // Alternatively for PHP peeps, use `files[]` for the name to support arrays
  // Array.prototype.forEach.call(fileFields.files, f => formData.append('files[]', f))
  
  return fetch(url, {
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: formData  // Coordinate the body type with 'Content-Type'
  })
  .then(response => response.json())
} 

Anda dapat menemukan lebih banyak tentang mengambil ini tautan

Alih -alih menggunakan API fetch, Anda dapat menggunakan AXIOS: Permintaan HTTP Berbasis Janji Perpustakaan. Ini adalah perpustakaan JavaScript pihak ketiga yang trendi.

Kesimpulan

JavaScript dapat mengirim permintaan jaringan ke server dan memuat informasi baru kapan pun diperlukan.

Misalnya, kita dapat menggunakan permintaan jaringan untuk:

  1. Kirimkan pesanan,
  2. Muat informasi pengguna,
  3. Terima pembaruan terbaru dari server, dan semua itu tanpa memuat ulang halaman!

JavaScript Fetch API menyediakan a mengambil() metode yang didefinisikan pada a jendela objek, yang dapat Anda gunakan untuk melakukan permintaan dan mengirimkannya ke server. Metode ini mengembalikan janji yang dapat Anda gunakan untuk mengambil respons terhadap permintaan tersebut.

Ada istilah payung “jax” (disingkat sinkronis Javascript nd ML) untuk permintaan jaringan dari JavaScript. Kami tidak harus menggunakan XML, meskipun: Istilah ini berasal dari masa lalu; Itu sebabnya kata itu ada di sana. Anda mungkin sudah mendengar istilah itu.

Ada beberapa cara untuk mengirim permintaan jaringan dan mendapatkan informasi dari server.

Metode fetch () modern dan serbaguna, jadi kita akan mulai dengannya. Sayangnya, itu tidak didukung oleh browser lama, tetapi sangat didukung dengan baik di antara yang modern.

Saya telah menulis tutorial berikut tentang Axios menggunakan kerangka kerja yang berbeda di blog ini.

  1. Axios
  2. Bereaksi aksios
  3. React Redux Axios
  4. Vue Axios

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *