Axios lwn Fetch

Versi Portugis

Axios dan Fetch ialah alatan popular untuk membuat permintaan HTTP dalam JavaScript, tetapi ia mempunyai beberapa perbezaan utama. Berikut ialah ringkasan:

Axios

• Ciri Terbina dalam: Axios dilengkapi dengan banyak ciri terbina dalam, seperti transformasi JSON automatik, pemintas permintaan dan tindak balas serta pembatalan permintaan.
• Keserasian Pelayar: Menyokong penyemak imbas lama, termasuk Internet Explorer.
• Pengendalian Ralat: Axios secara automatik menolak janji untuk status ralat HTTP (seperti 404 atau 500), menjadikan pengendalian ralat lebih mudah.
• Pemintas Permintaan/Tindak Balas: Membolehkan anda mengubah suai permintaan atau respons secara global dengan cara yang mudah.
• Minta Pembatalan: Axios menawarkan cara mudah untuk membatalkan permintaan.

Ambil

• API Asli: Ambil ialah API web asli, bermakna tidak perlu memasang perpustakaan tambahan.
• Berasaskan Janji: Menggunakan Promises, tetapi anda perlu menyemak status respons secara manual untuk mengesan ralat.
• Pengendalian Strim: Ambil menyokong penstriman, yang boleh berguna untuk mengendalikan respons yang besar.
• Lebih Kawalan: Menyediakan lebih banyak kawalan ke atas permintaan, tetapi memerlukan lebih banyak kod tambahan untuk ciri seperti menetapkan corak atau memintas permintaan.
• Tiada Sokongan Terbina dalam untuk JSON: Anda perlu memanggil .json() pada objek respons untuk menghuraikan data JSON.

Kes Penggunaan

• Gunakan Axios jika anda memerlukan set yang kaya dengan ciri luar biasa, terutamanya untuk aplikasi yang kompleks.
• Gunakan Ambil untuk kes penggunaan yang lebih mudah atau apabila anda mahu mengelakkan kebergantungan luaran.

Contoh Penggunaan

Axios:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

Ambil:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Nota:

• Untuk menghantar data, fetch() menggunakan sifat badan untuk permintaan POST, manakala Axios menggunakan sifat data.
• Data dalam fetch() diubah menjadi rentetan menggunakan kaedah JSON.stringify.
• Axios secara automatik mengubah data yang dikembalikan daripada pelayan, tetapi dengan fetch(), anda perlu memanggil kaedah response.json() untuk menghuraikan data menjadi objek JavaScript.
• Dengan Axios, respons data yang disediakan oleh pelayan boleh diakses dalam objek data, manakala dalam kaedah fetch(), data akhir boleh dinamakan dengan mana-mana pembolehubah.

Kesimpulan

Kedua-duanya mempunyai kekuatan masing-masing, dan pilihan selalunya bergantung pada keperluan dan pilihan khusus anda. Jika anda sedang membina aplikasi yang lebih besar dengan banyak interaksi API, Axios boleh memudahkan beberapa tugasan, manakala Fetch bagus untuk tugasan mudah.

Axios menawarkan API mesra pengguna yang memudahkan kebanyakan tugas komunikasi HTTP. Walau bagaimanapun, jika anda lebih suka menggunakan ciri penyemak imbas asli, anda pasti boleh melaksanakan sendiri fungsi yang serupa dengan API Ambil.

Seperti yang telah kami terokai, adalah boleh dilaksanakan sepenuhnya untuk mereplikasi ciri teras Axios menggunakan kaedah fetch() yang tersedia dalam penyemak imbas. Keputusan untuk memasukkan perpustakaan HTTP pelanggan akhirnya bergantung pada keselesaan anda dengan API asli dan keperluan khusus projek anda.

Untuk maklumat lanjut: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59

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