Pengenalan kepada API Fetch

mata utama

Oleh kerana struktur berasaskan janjinya, API Fetch secara beransur-ansur menggantikan XMLHTTPREQUEST untuk permintaan rangkaian, yang menjadikan sintaks lebih ringkas dan mengelakkan panggilan balik.
• Kaedah
• ditakrifkan pada objek fetch(). window API Fetch
membolehkan konfigurasi objek permintaan yang jelas, termasuk perubahan kaedah dan tajuk permintaan, yang boleh dilakukan dengan meluluskan objek permintaan ke fungsi
• . fetch()
Pengendalian ralat Menggunakan API Fetch melibatkan memeriksa sifat
• objek tindak balas, iaitu ok jika kod status tindak balas berada dalam lingkungan 200. Untuk kegagalan rangkaian, blok true boleh digunakan. try...catch

Artikel ini akan memperkenalkan penampilan API Fetch baru, masalah yang diselesaikan, dan cara yang paling praktikal untuk mendapatkan data jauh dalam laman web menggunakan fungsi

. fetch()

Selama bertahun -tahun, xmlhttprequest telah menjadi pembantu yang dipercayai untuk pemaju web. Sama ada digunakan secara langsung atau di latar belakang, XMLHTTPREQUEST menyokong Ajax dan pengalaman interaktif baru, dari Gmail ke Facebook.

Walau bagaimanapun, XMLHTTPREQUEST secara beransur -ansur digantikan oleh API FETCH. Kedua -duanya boleh digunakan untuk membuat permintaan rangkaian, tetapi API Fetch didasarkan pada janji, yang menjadikan sintaks lebih ringkas dan membantu mengelakkan panggilan balik.

Ambil Api

API mengambil menyediakan kaedah

yang ditakrifkan pada objek

yang boleh digunakan untuk melakukan permintaan. Kaedah ini mengembalikan janji yang boleh digunakan untuk mendapatkan respons permintaan. window Kaedah fetch()

hanya mempunyai satu parameter yang diperlukan, iaitu, URL sumber yang akan diambil. Contoh yang sangat asas ditunjukkan di bawah. Ini akan mendapat lima jawatan pertama di r/javascript di reddit:

fetch

Jika anda menyemak respons dalam konsol penyemak imbas, anda harus melihat objek tindak balas dengan pelbagai sifat:

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

Permintaan itu seolah -olah telah berjaya, tetapi di manakah lima jawatan pertama kami? Mari kita cari.

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

LOAD JSON

Kami tidak dapat menyekat antara muka pengguna dan tunggu permintaan selesai. Inilah sebabnya

mengembalikan janji, objek yang mewakili hasil masa depan. Dalam contoh di atas, kami menggunakan kaedah

untuk menunggu tindak balas pelayan dan log ke konsol. fetch() then Sekarang mari kita lihat bagaimana untuk mengekstrak muatan JSON dari respons tersebut setelah permintaan selesai:

Kami memulakan permintaan dengan menghubungi

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));

. Apabila janji selesai, ia mengembalikan objek tindak balas yang mendedahkan kaedah

. Dalam fetch() pertama kita boleh memanggil kaedah json ini untuk mengembalikan badan tindak balas sebagai JSON. then()Walau bagaimanapun, kaedah

juga mengembalikan janji, yang bermaksud kita perlu menghubungkan lagi json sebelum kita dapat log respons JSON ke konsol. then()

mengapa

kembali janji? Kerana HTTP membolehkan anda menstrimkan blok kandungan dengan blok kepada klien, walaupun penyemak imbas menerima respons dari pelayan, badan kandungan mungkin belum tiba! json()

async ... menunggu

Sintaks adalah baik, tetapi cara mudah untuk menangani janji -janji pada tahun 2018 adalah menggunakan sintaks baru yang diperkenalkan oleh ES2017. Menggunakan .then() bermakna kita boleh menandakan fungsi sebagai async...await, dan kemudian gunakan kata kunci async...await untuk menunggu janji untuk menyelesaikan dan mengakses hasil seperti objek biasa. Fungsi asynchronous disokong dalam semua pelayar moden (kecuali IE atau Opera Mini) dan Node.js 7.6. async await Berikut adalah contoh di atas (sedikit dilanjutkan):

async...await Tiada perubahan besar. Sebagai tambahan kepada hakikat bahawa kami mencipta fungsi tak segerak (yang mana kami meluluskan nama subdirektori), kami kini menunggu hasil memanggil

dan kemudian gunakan

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

sekali lagi untuk mendapatkan JSON dari respons.

fetch() Ini adalah aliran kerja asas, tetapi perkara -perkara yang melibatkan perkhidmatan jauh tidak selalu berjalan lancar. await

Ralat pemprosesan

Katakan kami meminta pelayan yang tidak wujud atau yang memerlukan kebenaran. Menggunakan , kesilapan peringkat aplikasi, seperti 404 respons, mesti dikendalikan dalam proses biasa. Seperti yang dinyatakan sebelum ini,

mengembalikan objek tindak balas dengan atribut

. Jika fetch() adalah fetch(), kod status tindak balas berada dalam lingkungan 200: ok response.ok true Makna kod respons pelayan berbeza -beza mengikut API, dan memeriksa

biasanya tidak mencukupi. Sebagai contoh, sesetengah API mengembalikan 200 respons walaupun kunci API tidak sah. Pastikan anda membaca dokumentasi API!

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

Untuk menangani kegagalan rangkaian, gunakan response.ok blok:

try...catch Kod dalam blok

hanya akan dijalankan apabila ralat rangkaian berlaku.

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));

Anda telah mempelajari asas -asas membuat permintaan dan membaca respons. Sekarang mari kita menyesuaikan permintaan lebih lanjut. catch

Tukar kaedah permintaan dan header

Lihat contoh di atas, anda mungkin tertanya -tanya mengapa anda tidak boleh menggunakan pembungkus XMLHTTPREQUEST yang sedia ada. Sebabnya ialah API Fetch menyediakan lebih daripada sekadar kaedah.

Walaupun contoh XMLHTTPREQUEST yang sama mesti digunakan untuk melaksanakan permintaan dan mengambil respons, API FETCH membolehkan anda untuk mengkonfigurasi objek permintaan secara eksplisit. fetch() Sebagai contoh, jika anda perlu menukar bagaimana

membuat permintaan (contohnya, konfigurasikan kaedah permintaan), anda boleh lulus objek permintaan ke fungsi

. Parameter pertama pembina permintaan adalah URL permintaan, dan parameter kedua adalah objek pilihan untuk mengkonfigurasi permintaan:

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => console.log(res));

di sini, kami menentukan kaedah permintaan dan minta untuk tidak menyusahkan respons.

Header Permintaan boleh diubah dengan memberikan objek tajuk ke medan Header Permintaan. Inilah cara meminta kandungan JSON hanya menggunakan tajuk "Terima":

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers {}
  ok: true
  redirected: false
  status: 200
  statusText: ""
  type: "cors"
  url: "https://www.reddit.com/top/.json?count=5"
}

Permintaan baru boleh dibuat dari permintaan lama untuk menyesuaikan tujuan mereka. Sebagai contoh, anda boleh membuat permintaan pos dari permintaan GET ke sumber yang sama. Berikut adalah contoh:

fetch('https://www.reddit.com/r/javascript/top/.json?limit=5')
  .then(res => res.json())
  .then(json => console.log(json));

Headers Response juga boleh diakses, tetapi ingat bahawa mereka adalah nilai baca sahaja.

async function fetchTopFive(sub) {
  const URL = `https://www.reddit.com/r/${sub}/top/.json?limit=5`;
  const fetchResult = fetch(URL);
  const response = await fetchResult;
  const jsonData = await response.json();
  console.log(jsonData);
}

fetchTopFive('javascript');

Permintaan dan respons rapat ikuti spesifikasi HTTP; Jika anda berminat untuk mempelajari lebih lanjut, anda boleh membaca semua maklumat yang berkaitan di halaman API Fetch di MDN.

Mengintegrasikan semua Kandungan

Untuk mengakhiri artikel ini, di sini adalah contoh yang boleh dilancarkan menunjukkan cara untuk mendapatkan lima jawatan pertama subdirektori tertentu dan memaparkan butiran mereka dalam senarai.

(contoh codepen harus dimasukkan di sini, tetapi kerana saya tidak dapat mengakses laman web luaran, ia tidak dapat disediakan)

Langkah seterusnya

Dalam artikel ini, anda telah belajar tentang penampilan API Fetch baru dan isu -isu yang diselesaikannya. Saya telah menunjukkan cara menggunakan kaedah fetch() untuk mendapatkan data jauh, cara mengendalikan kesilapan, dan bagaimana membuat objek permintaan untuk mengawal kaedah dan tajuk permintaan.

Seperti yang ditunjukkan dalam carta di bawah, sokongan untuk fetch() adalah baik. Jika anda perlu menyokong pelayar yang lebih tua, anda boleh menggunakan polyfill.

(bolehkah saya menggunakan carta? Oleh itu, apabila anda membuat permintaan AJAX menggunakan perpustakaan seperti jQuery, sila luangkan sedikit masa untuk mempertimbangkan sama ada anda boleh menggunakan kaedah penyemak imbas asli.

soalan yang sering ditanya mengenai Fetch API (FAQ)

(bahagian Soalan Lazim harus dimasukkan di sini, tetapi disebabkan oleh batasan ruang, saya akan menghilangkannya. Anda boleh menambah bahagian FAQ sendiri berdasarkan output sebelumnya.)

Atas ialah kandungan terperinci Pengenalan kepada API Fetch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!