Perbezaan Antara Axios & Fetch dalam Javascript

Dalam JavaScript, kedua-dua Axios dan API Ambil asli digunakan untuk membuat permintaan HTTP, tetapi mereka mempunyai beberapa perbezaan dari segi ciri, kemudahan penggunaan dan kefungsian. Berikut ialah pecahan:

1. Kemudahan Penggunaan:

• Axios:
  
  Axios memudahkan membuat permintaan dan mengendalikan respons. Ia menghuraikan respons JSON secara automatik, menjadikannya lebih mudah untuk digunakan.
  

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

• Ambil:
  
  Dengan pengambilan, anda perlu mengendalikan penghuraian JSON secara eksplisit, yang menambahkan langkah tambahan.
  

   fetch('/api/user')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));
  

2. Pengendalian Respons:

• Axios: Axios secara automatik menyelesaikan respons dan melontarkan ralat jika status respons berada di luar julat 2xx, jadi anda boleh terus mengendalikan ralat dalam blok .catch().

• Ambil:
  
  Dengan pengambilan, kod status bukan 2xx (seperti 404 atau 500) tidak dianggap sebagai ralat. Anda perlu menyemak status respons secara manual dan membuang ralat jika perlu.
  

   fetch('/api/user')
     .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));
  

3. Pemintasan Permintaan dan Tindak Balas:

• Axios:
  
  Axios menyediakan pemintas terbina dalam, membolehkan anda mengubah suai permintaan atau mengendalikan respons secara global, yang boleh berguna untuk menambah token pengesahan, pengelogan, dsb.
  

   axios.interceptors.request.use(config => {
     config.headers['Authorization'] = 'Bearer token';
     return config;
   });
  

• Ambil:
  
  Fetch tidak mempunyai pemintas terbina dalam, jadi anda perlu membalut panggilan pengambilan secara manual dalam fungsi tersuai jika anda memerlukan gelagat ini.

4. Keserasian Pelayar:

• Axios: Axios berfungsi pada penyemak imbas lama (IE 11 dan lebih awal) dan mengendalikan polyfill secara dalaman.
• Ambil: API Ambil tidak disokong dalam Internet Explorer. Anda mungkin memerlukan polyfill seperti whatwg-fetch untuk menyokongnya dalam penyemak imbas lama.

5. Pengendalian Data:

• Axios:
  
  Axios secara automatik menyelaraskan data apabila membuat permintaan POST dan menetapkan Jenis Kandungan kepada aplikasi/json. Ia juga menyokong penghantaran data dalam format lain seperti FormData dengan mudah.
  

   axios.post('/api/user', { name: 'John' });
  

• Ambil:
  
  Dalam pengambilan, anda perlu menyusun data secara manual dan menetapkan pengepala untuk permintaan POST.
  

   fetch('/api/user', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ name: 'John' })
   });
  

6. Membatalkan Permintaan:

• Axios:
  
  Axios mempunyai sokongan terbina dalam untuk membatalkan permintaan menggunakan CancelToken.
  

   const source = axios.CancelToken.source();
   axios.get('/api/user', { cancelToken: source.token });
   source.cancel('Request canceled.');
  

• Ambil:
  
  Dengan pengambilan, anda perlu menggunakan AbortController untuk membatalkan permintaan, yang boleh menjadi lebih rumit.
  

   const controller = new AbortController();
   fetch('/api/user', { signal: controller.signal });
   controller.abort();
  

7. Pengendalian Ralat:

• Axios: Axios secara automatik membuang ralat untuk respons bukan 2xx, dan pengendalian ralat lebih konsisten dan terpusat.
• Ambil: Ambil memerlukan lebih banyak pengendalian ralat manual, kerana ia hanya akan menolak janji untuk ralat rangkaian, bukan untuk kod status ralat HTTP.

Kesimpulan:

• Axios lebih kaya dengan ciri, mudah digunakan dan memberikan abstraksi yang lebih baik untuk mengendalikan permintaan.
• Fetch ialah API asli moden yang memerlukan lebih sedikit kebergantungan tetapi memerlukan lebih banyak kerja manual untuk mengendalikan ciri tertentu seperti ralat, pemintas dan pengendalian data.

Jika anda lebih suka kawalan ke atas permintaan anda, anda mungkin tetap menggunakan fetch. Jika anda mahukan sesuatu yang memudahkan permintaan HTTP, axios akan menjadi pilihan yang lebih baik.

Atas ialah kandungan terperinci Perbezaan Antara Axios & Fetch dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!