Axios dan API Ambil? Memilih Klien HTTP yang Tepat

TL;DR: Axios dan Fetch API ialah klien HTTP yang popular. Axios menawarkan lebih banyak ciri dan pengendalian ralat yang lebih mudah, manakala API Ambil adalah ringan dan asli kepada penyemak imbas. Pilih Axios untuk projek kompleks dan Ambil untuk projek yang lebih ringkas

Dua kaedah yang paling biasa untuk mengendalikan permintaan HTTP tak segerak ialah fetch() dan Axios. Walaupun merupakan operasi biasa, jenis permintaan yang anda pilih untuk bekerja boleh mempunyai pengaruh yang besar pada kebolehgunaan dan kecekapan keseluruhan apl. Oleh itu, adalah bijak untuk memeriksa mereka dengan teliti dan menimbang kebaikan dan keburukan mereka sebelum memilih satu.

Artikel ini akan membandingkan dua alatan yang digunakan secara meluas ini secara menyeluruh untuk membantu anda membuat pilihan terbaik untuk projek anda.

Apakah Axios?

ialah klien HTTP pihak ketiga berasaskan janji yang biasa dilihat dalam penyemak imbas ( XMLHttpRequests ) dan persekitaran Node.js (HTTP). Ia menyediakan API mudah yang mampu memintas permintaan dan respons, melakukan pembatalan permintaan dan menghuraikan data respons secara automatik kepada format JSON. Axios juga menyokong perlindungan pihak pelanggan terhadap XSRF (pemalsuan permintaan merentas tapak). Anda boleh memasang Axios dengan pengurus pakej seperti npm atau menambahkannya pada projek anda melalui CDN.

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Kelebihan Axios

• Pembatalan permintaan automatik.
• Pengendalian ralat terbina dalam, pemintas dan sintaks bersih.
• Keserasian dengan pelbagai jenis pelayar lama dan moden.
• Berasaskan janji.

Kelemahan Axios

• Pergantungan luaran.
• Saiz berkas yang besar dan kerumitan yang ketara.

Apakah fetch()?

API Ambil juga berasaskan janji tetapi API JavaScript asli tersedia dalam semua penyemak imbas moden. Ia juga serasi dengan persekitaran Node.js dan menggantikan XMLHttpRequests warisan dengan pendekatan yang lebih ringkas dan kontemporari. API Ambil menyediakan kaedah fetch() untuk menghantar permintaan dan menyokong berbilang permintaan dan jenis respons seperti JSON, Blob dan FormData.

Kelebihan fetch()

• Sokongan penyemak imbas asli, jadi tiada kebergantungan luaran.
• API ringan dan lebih mudah.
• Berasaskan janji.
• fetch() ialah API peringkat rendah. Jadi, ia memberikan kawalan yang lebih halus.

Kelemahan fetch()

• Ciri terbina dalam terhad untuk pengendalian ralat dan tamat masa permintaan berbanding Axios.
• Kod verbose untuk tugasan biasa.

Perbezaan antara Axios dan fetch()

Memandangkan anda kini memahami maksud Axios dan fetch(), mari bandingkan dan bezakan beberapa ciri utama kedua-dua ciri ini dengan contoh kod.

Sintaks asas

Mengenai sintaks, Axios menyampaikan sintaks yang lebih padat dan mesra pembangun daripada fetch().

Permintaan POST ringkas dengan Axios:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Permintaan POST serupa dengan fetch():

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

Ia agak ketara kerana walaupun fetch() ringan, ia masih memerlukan lebih banyak kerja manual untuk melaksanakan beberapa tugas biasa. Sebagai contoh, Axios dilengkapi dengan penghuraian JSON automatik dan boleh mengakses secara langsung objek data respons. Sebaliknya, dalam fetch(), anda perlu menghuraikan respons kepada format JSON secara manual. Walaupun kedua-dua pendekatan yang dibentangkan menghasilkan hasil yang serupa, anda perlu menangani ralat, penyirian dan pengepala secara eksplisit dalam fetch().

Ralat pengendalian

Mengendalikan ralat ialah sesuatu yang dihadapi oleh pembangun hampir setiap hari. Axios, misalnya, mengendalikan sebarang panggilan HTTP dengan kod status di luar julat 2xx sebagai ralat secara lalai. Ia memberi anda objek penjelasan yang berguna dalam mengurus dan menyahpepijat ralat anda.

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() tidak secara automatik menganggap ralat HTTP (kod status 4xx atau 5xx) sebagai ralat. Anda perlu melakukan semakan bersyarat secara manual untuk mengenal pasti status respons untuk menangkap ralat. Tetapi anda boleh mempunyai logik pengendalian ralat tersuai dalam projek anda untuk mengumpulkan maklumat dan mengendalikan ralat seperti yang dilakukan oleh Axios.

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Keserasian ke belakang dengan penyemak imbas

Jika anda memerlukan keserasian dengan kebergantungan warisan, seperti penyemak imbas yang lebih lama seperti Internet Explorer (IE11) atau versi lama bagi kebanyakan penyemak imbas moden, penyelesaian pilihan anda ialah Axios.

fetch() adalah asli kepada penyemak imbas moden dan berfungsi dengan lancar dengannya. Walau bagaimanapun, ia tidak menyokong beberapa versi pelayar lama. Anda masih boleh menggunakannya dengan polyfill seperti whatwg-fetch untuk menjadikannya berfungsi dalam penyemak imbas yang tidak menggunakan fetch(). Adalah penting untuk ambil perhatian bahawa penggunaan poliisi mungkin meningkatkan saiz berkas anda dan menjejaskan prestasi.

!(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

Pemintas HTTP

Pemintas HTTP membenarkan memintas permintaan dan respons dan berguna apabila:

• Mengubah suai permintaan (contohnya, apabila menambahkan pengesahan pada pengepala).
• Mengubah respons (pramemproses data respons).
• Mengendalikan ralat secara global (melog dan mengubah hala apabila menghadapi 401 yang tidak dibenarkan).

Ciri berkuasa ini keluar dari kotak dengan Axios tetapi tidak disokong secara asli oleh fetch().

Menambahkan token pengesahan pada permintaan dengan Axios:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Walau bagaimanapun, itu tidak bermakna fetch() tidak boleh melakukan pemintasan HTTP. Anda boleh menggunakan perisian tengah untuk menulis pembungkus tersuai secara manual untuk meniru gelagat ini.

Menambahkan token pengesahan pada permintaan dengan pembungkus fetch():

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

Tamat masa tindak balas

Tamat masa respons merujuk kepada masa pelanggan akan menunggu pelayan untuk bertindak balas. Jika had masa ini dicapai, permintaan itu dikira sebagai tidak berjaya. Sokongan Axios dan fetch() meminta tamat masa, penting apabila berurusan dengan rangkaian yang tidak boleh dipercayai atau perlahan. Namun, Axios mendahului dengan menyediakan pendekatan yang lebih mudah untuk pengurusan tamat masa.

Permintaan tamat masa dengan Axios:

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

Permintaan tamat masa dengan fetch():

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Axios mengendalikan tamat masa dengan lebih ringkas dan anggun dengan kod yang lebih bersih menggunakan pilihan tamat masanya. Tetapi, fetch() memerlukan pengendalian tamat masa manual dengan AbortController(), yang memberi anda lebih kawalan ke atas cara dan bila permintaan itu dibatalkan.

Rujukan GitHub

Untuk butiran lanjut, rujuk contoh lengkap untuk Axios lwn. Fetch pada repositori GitHub.

Kesimpulan

Seperti banyak alat, kedua-dua Axios dan Fetch API disertakan dengan kekuatan dan kelemahan. Jika anda memerlukan penghuraian automatik JSON, pengendalian ralat bersepadu dan pemintas untuk menyelaraskan proses yang rumit, gunakan Axios. Pilih fetch() jika anda mahukan antara muka tulen dan ringkas yang paling sesuai untuk persekitaran penyemak imbas moden dan tidak memerlukan pustaka luaran. Pendek kata, kedua-duanya berfungsi dengan baik, tetapi ia sesuai dengan tahap kerumitan dan keperluan fungsi yang berbeza.

Blog berkaitan

• 5 Amalan Terbaik dalam Mengendalikan Ralat HTTP dalam JavaScript
• 5 Sambungan Chrome Terbaik untuk Mengendalikan Permintaan HTTP
• Cara Menghijrah Pengendali dan Modul HTTP ASP.NET ke Perisian Tengah Teras ASP.NET
• Kendalikan Tindakan CRUD dengan Cekap dalam Syncfusion ASP.NET MVC DataGrid dengan Permintaan Ambil

Atas ialah kandungan terperinci Axios dan API Ambil? Memilih Klien HTTP yang Tepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!