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:

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

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

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

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

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!