Ambil Panduan Penuh API

Pengenalan kepada Fetch API

API Ambil ialah API JavaScript asli moden yang membolehkan anda membuat permintaan HTTP dengan cara yang mudah dan fleksibel. Ia menyediakan alternatif yang lebih mudah dan bersih kepada teknologi lama seperti XMLHttpRequest. Fetch adalah berasaskan janji, yang bermaksud ia berfungsi dengan baik dengan ciri JavaScript moden seperti async/waiit dan .then() chaining.

API Ambil menyediakan cara yang mudah difahami untuk berinteraksi dengan API RESTful, mengendalikan kedua-dua permintaan yang mudah dan kompleks. Ia disokong secara meluas dalam penyemak imbas moden dan merupakan alat yang biasa digunakan untuk pembangunan web.

Ciri Utama Fetch API:

1. Berasaskan Janji: Dibina atas Janji, menyediakan cara yang mudah dan intuitif untuk mengurus kod tak segerak.
2. Menyokong semua kaedah HTTP: GET, POST, PUT, DELETE, PATCH, dll.
3. Tiada panggilan balik neraka: Terima kasih kepada Promises, ia mengelakkan panggilan balik bersarang.
4. Strim sokongan: Fetch menyokong strim, yang menjadikannya sesuai untuk mengendalikan sejumlah besar data dengan cekap.
5. Pengendalian ralat yang dipertingkatkan: Tidak seperti XMLHttpRequest, API Ambil tidak akan menolak status ralat HTTP (cth., 404 atau 500). Anda perlu mengendalikannya secara manual.

Pemasangan

API Ambil terbina dalam pelayar web moden, bermakna anda tidak perlu memasang apa-apa jika anda bekerja dalam persekitaran penyemak imbas. Ia tersedia secara asli dan sedia untuk digunakan untuk membuat permintaan HTTP.

Walau bagaimanapun, jika anda bekerja dalam persekitaran Node.js (di mana pengambilan tidak disokong secara asli), anda boleh memasang polyfill seperti nod-fetch.

1. Menggunakan npm (Untuk persekitaran Node.js):

Jika anda bekerja dalam persekitaran Node.js dan perlu menggunakan Fetch, anda boleh memasang node-fetch:

npm install node-fetch

Kemudian, importnya ke dalam projek anda:

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

Menggunakan API Ambil

API Ambil menyediakan fungsi ambil () global yang boleh anda gunakan untuk membuat permintaan HTTP. Fungsi ini mengembalikan Janji yang diselesaikan kepada objek Respons yang mewakili respons kepada permintaan.

Sintaks

fetch(url, [options])

Parameter

1. url:

   • Jenis: rentetan
   • Perihalan: URL yang permintaan dihantar. Ini boleh menjadi URL penuh atau URL relatif berdasarkan URL asas yang ditakrifkan dalam permintaan.

2. pilihan (pilihan):

   • Jenis: objek
   • Penerangan: Objek konfigurasi pilihan untuk mengubah suai permintaan. Beberapa pilihan biasa termasuk:
     • kaedah: Kaedah HTTP (cth., GET, POST, PUT, DELETE).
     • pengepala: Pengepala tersuai untuk disertakan dalam permintaan (cth., Jenis Kandungan, Keizinan).
     • badan: Badan permintaan (hanya untuk kaedah seperti POST atau PUT).
     • mod: Mengawal permintaan silang asal. (cth., 'cors', 'no-cors', 'sama-asal').
     • cache: Menentukan cara permintaan akan berinteraksi dengan cache (cth., 'tiada kedai', 'muat semula').
     • kelayakan: Mengawal kuki dan pengesahan (cth., 'sama-asal', 'termasuk').

Permintaan Pengambilan Asas (DAPAT)

Permintaan GET asas dengan API Ambil adalah mudah. Fungsi fetch() membuat permintaan ke URL yang disediakan dan mengembalikan Janji yang diselesaikan dengan objek Respons.

Contoh Kod:

Berikut ialah contoh permintaan GET yang mudah menggunakan API Ambil:

npm install node-fetch

Penjelasan:

• fetch() memulakan permintaan ke URL yang diberikan.
• .then(response => response.json()): Menukar objek Respons menjadi objek JavaScript dengan menghuraikan data JSON.
• .catch(): Menangkap dan mencatat sebarang ralat, seperti ralat rangkaian atau permintaan yang gagal.

Membuat Permintaan POST dengan Ambil

API Ambil juga membenarkan anda membuat permintaan POST. Permintaan POST biasanya digunakan untuk menghantar data ke pelayan, seperti menyerahkan borang atau mencipta sumber baharu.

Sintaks untuk Permintaan POST:

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

Contoh Kod:

Berikut ialah contoh permintaan POST yang menghantar data ke pelayan:

fetch(url, [options])

Penjelasan:

• kaedah: 'POST': Menentukan bahawa ini ialah permintaan POST.
• body: JSON.stringify(postData): Menukar data kepada rentetan JSON sebelum menghantarnya dalam badan permintaan.
• pengepala: Menetapkan pengepala Jenis Kandungan kepada aplikasi/json untuk menunjukkan bahawa data yang dihantar adalah dalam format JSON.

Mengendalikan Data Respons

Objek Respons yang dikembalikan oleh API Ambil mengandungi beberapa sifat dan kaedah untuk berinteraksi dengan data respons.

Sifat Utama dan Kaedah Tindak Balas:

1. response.json(): Menghuraikan badan respons sebagai JSON.
2. response.text(): Menghuraikan isi tindak balas sebagai rentetan.
3. response.blob(): Menghuraikan respons sebagai objek besar binari (berguna untuk mengendalikan imej atau fail).
4. response.ok: Boolean yang menunjukkan jika kod status respons berada dalam julat 200-299 (berjaya).
5. response.status: Kod status HTTP respons (mis., 200 untuk kejayaan, 404 untuk tidak ditemui).
6. response.headers: Pengepala dikembalikan oleh pelayan sebagai tindak balas kepada permintaan.

Contoh Kod:

Berikut ialah contoh cara mengendalikan jenis data respons yang berbeza:

npm install node-fetch

Penjelasan:

• response.ok menyemak sama ada respons berjaya (kod status 200-299). Jika tidak, ralat akan dilemparkan.
• response.json() dipanggil untuk menghuraikan respons sebagai objek JavaScript.

Mengendalikan Ralat dalam Pengambilan

Tidak seperti XMLHttpRequest, API Ambil tidak secara automatik menolak status ralat HTTP (cth., 404 atau 500). Ia hanya menolak jika terdapat kegagalan rangkaian atau jika permintaan disekat. Untuk mengendalikan ralat seperti 404 atau 500, anda perlu menyemak sifat respons.ok.

Contoh Pengendalian Ralat:

Berikut ialah contoh cara mengendalikan ralat dengan berkesan dalam Ambil:

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

Penjelasan:

• response.ok: Ini menyemak sama ada kod status respons berada dalam julat 200–299 (menunjukkan kejayaan).
• Jika permintaan gagal (mis., ralat 404 atau 500), ia akan menimbulkan ralat dengan kod status yang sepadan.

Kesimpulan

API Ambil ialah alat yang berkuasa dan moden untuk membuat permintaan HTTP dalam JavaScript. Ia menyediakan cara yang bersih dan intuitif untuk bekerja dengan API REST, dan seni bina berasaskan janji memudahkan untuk mengurus kod tak segerak. Dengan sokongannya untuk semua kaedah HTTP, pengendalian ralat dan penghuraian respons, Fetch ialah alat penting untuk pembangun web.

Sama ada anda mengambil data, menyerahkan borang atau mengendalikan pengesahan, API Ambil menawarkan fleksibiliti dan kawalan ke atas permintaan HTTP anda, menjadikannya pilihan terbaik untuk aplikasi web moden.

Atas ialah kandungan terperinci Ambil Panduan Penuh API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!