Menguasai API Ambil: Memudahkan Permintaan HTTP dalam JavaScript

API Ambil JavaScript

API Ambil ialah antara muka moden berasaskan janji dalam JavaScript yang digunakan untuk membuat permintaan HTTP. Ia memudahkan proses mengambil sumber daripada pelayan, menggantikan kaedah lama seperti XMLHttpRequest. Fetch menyediakan pendekatan yang lebih bersih dan mudah dibaca untuk mengendalikan permintaan dan respons rangkaian, menyokong ciri seperti Janji, penstriman dan async/menunggu.

---

1. Ciri Utama Fetch API

• Berasaskan Janji: Menyediakan cara yang lebih elegan untuk mengendalikan operasi tak segerak.
• Sintaks Ringkas: Lebih mudah dibaca berbanding XMLHttpRequest.
• Menyokong Penstriman: Mengendalikan respons besar dengan cekap.
• Boleh Diperluas: Mudah disepadukan dengan alat dan perpustakaan JavaScript moden.

---

2. Sintaks Asas Pengambilan

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

3. Membuat Permintaan GET

Ambil lalai kepada kaedah GET.

Contoh:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

4. Membuat Permintaan POST

Untuk menghantar data ke pelayan, gunakan kaedah POST dengan sifat badan dalam objek pilihan.

Contoh:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

5. Pilihan Pengambilan Biasa

Fungsi ambil menerima objek pilihan untuk mengkonfigurasi permintaan:

Option	Description
method	HTTP method (e.g., GET, POST, PUT, DELETE).
headers	Object containing request headers.
body	Data to send with the request (e.g., JSON, form data).
credentials	Controls whether cookies are sent with the request (include, same-origin).

Pilihan

---

Penerangan

kaedah Kaedah HTTP (cth., GET, POST, PUT, DELETE). pengepala Objek yang mengandungi pengepala permintaan. badan Data untuk dihantar dengan permintaan (cth., JSON, data borang). kelayakan Mengawal sama ada kuki dihantar dengan permintaan (termasuk, asal yang sama).

6. Mengendalikan Respons

Method	Description
response.text()	Returns response as plain text.
response.json()	Parses the response as JSON.
response.blob()	Returns response as a binary Blob.
response.arrayBuffer()	Provides response as an ArrayBuffer.

Objek Respons daripada panggilan ambil mengandungi kaedah untuk memproses data: Kaedah Penerangan response.text() Mengembalikan respons sebagai teks biasa. response.json() Menghuraikan respons sebagai JSON. response.blob() Mengembalikan respons sebagai Blob binari. response.arrayBuffer() Menyediakan respons sebagai ArrayBuffer.

Contoh: Mengambil JSON

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

7. Menggunakan Async/Await dengan Ambil

Async/menunggu memudahkan pengendalian Janji dalam Ambil.

Contoh:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

8. Ralat Mengendalikan dalam Ambil

Tidak seperti XMLHttpRequest, Fetch tidak menolak Promise untuk ralat HTTP. Anda mesti menyemak sifat ok atau kod status respons.

Contoh:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

9. Ambil dengan Tamat Masa

Fetch tidak menyokong tamat masa permintaan secara asli. Anda boleh melaksanakan tamat masa menggunakan Promise.race().

Contoh:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

---

10. Perbandingan: Ambil API lwn XMLHttpRequest

Feature	Fetch API	XMLHttpRequest
Syntax	Promise-based, simpler, cleaner.	Callback-based, verbose.
Error Handling	Requires manual handling of HTTP errors.	Built-in HTTP error handling.
Streaming	Supports streaming responses.	Limited streaming capabilities.
Modern Features	Works with Promises, async/await.	No built-in Promise support.

Ciri

---

Ambil API

XMLHttpRequest Sintaks

Berasaskan janji, lebih ringkas, lebih bersih. Berasaskan panggilan balik, verbose.

Pengendalian Ralat

Memerlukan pengendalian manual ralat HTTP. Pengendalian ralat HTTP terbina dalam.

Penstriman

Menyokong respons penstriman. Keupayaan penstriman terhad.

Ciri Moden

Berfungsi dengan Janji, tidak segerak/menunggu. Tiada sokongan Promise terbina dalam.

---

11. Bila hendak menggunakan API Ambil

Fetch sesuai untuk projek pembangunan web moden.

Ia disepadukan dengan lancar dengan Janji dan tidak segerak/menunggu.
Gunakannya apabila anda memerlukan kod yang lebih bersih dan boleh diselenggara.

12. Kesimpulan API Ambil memudahkan membuat permintaan HTTP dalam JavaScript, menyediakan alternatif yang lebih moden dan boleh dibaca kepada XMLHttpRequest. Dengan seni bina berasaskan Promise, ia lebih sesuai untuk operasi tak segerak, terutamanya apabila digandingkan dengan async/menunggu. Memahami API Ambil adalah penting untuk membina aplikasi web yang moden dan dinamik. Hai, saya Abhay Singh Kathayat! Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna. Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai API Ambil: Memudahkan Permintaan HTTP dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!