Axios vs Fetch: Mana yang Terbaik untuk Permintaan HTTP?

Terdapat banyak cara untuk membuat permintaan HTTP dalam JavaScript, tetapi dua daripada yang paling popular ialah Axios dan native fetch() API. Dalam siaran ini, kami akan membandingkan dan membezakan kedua-dua kaedah ini untuk menentukan yang mana satu lebih sesuai untuk senario yang berbeza.

Peranan Penting Permintaan HTTP

Permintaan HTTP adalah asas untuk berkomunikasi dengan pelayan dan API dalam aplikasi web. Kedua-dua Axios dan fetch() digunakan secara meluas untuk memudahkan permintaan ini dengan berkesan. Mari selami ciri-ciri mereka dan lihat bagaimana ia disusun.

Apakah Axios?

Axios ialah perpustakaan pihak ketiga yang menyediakan klien HTTP berasaskan janji untuk membuat permintaan HTTP. Ia terkenal dengan kesederhanaan dan fleksibilitinya serta digunakan secara meluas dalam komuniti JavaScript.

Sintaks Asas Axios

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Ciri-ciri Utama Axios:

• Fleksibiliti Konfigurasi: Menerima URL dan objek konfigurasi.
• Pengendalian Data Automatik: Menukar data kepada dan dari JSON secara automatik.
• Pengendalian Ralat: Mengendalikan kod status ralat HTTP secara automatik, menghantarnya ke blok tangkapan.
• Respons Ringkas: Mengembalikan data pelayan terus dalam sifat data objek respons.
• Pengurusan Ralat Diperkemas: Menyediakan mekanisme pengendalian ralat yang lebih diperkemas.

Contoh:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Mengapa Menggunakan Axios?

• Transformasi Data JSON Automatik: Menukar data kepada dan dari JSON dengan lancar.
• Tamat Masa Respons: Membenarkan menetapkan tamat masa untuk permintaan.
• Pemintas HTTP: Membolehkan anda memintas permintaan dan respons.
• Kemajuan Muat Turun: Menjejak kemajuan muat turun dan muat naik.
• Permintaan Serentak: Mengendalikan berbilang permintaan serentak dan menggabungkan respons.

Apa itu Fetch?

fetch() ialah API terbina dalam dalam JavaScript moden, disokong oleh semua penyemak imbas moden. Ia ialah API web tak segerak yang mengembalikan data dalam bentuk janji.

Ciri-ciri fetch():

• Sintaks Asas: Mudah dan ringkas, mengambil URL dan objek pilihan pilihan.
• Keserasian Ke Belakang: Boleh digunakan dalam penyemak imbas lama dengan polyfill.
• Boleh disesuaikan: Membenarkan kawalan terperinci ke atas pengepala, kandungan, kaedah, mod, bukti kelayakan, cache, ubah hala dan dasar perujuk.

Cara Menggunakan Axios untuk Membuat Permintaan HTTP

Mula-mula, pasang Axios menggunakan npm atau benang:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Anda juga boleh memasukkan Axios melalui CDN:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Berikut ialah cara menggunakan Axios untuk membuat permintaan GET:

npm install axios
# or
yarn add axios
# or
pnpm install axios

Membuat Permintaan HTTP dengan Ambil

Memandangkan fetch() terbina dalam, anda tidak perlu memasang apa-apa. Begini cara membuat permintaan GET dengan fetch():

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Perhatikan bahawa:

• Pengendalian Data: Axios menukar data secara automatik kepada dan dari JSON, manakala dengan fetch() anda mesti memanggil response.json() secara manual.
• Pengendalian Ralat: Axios mengendalikan ralat dalam blok tangkapan, manakala fetch() hanya menolak janji pada ralat rangkaian, bukan pada ralat status HTTP.

Sintaks Asas Pengambilan

import axios from 'axios';

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

Ciri-ciri Utama:

• Argumen Mudah: Mengambil URL dan objek konfigurasi pilihan.
• Pengendalian Data Manual: Memerlukan penukaran manual data kepada rentetan.
• Objek Respons: Mengembalikan objek Respons yang mengandungi maklumat respons yang lengkap.
• Pengendalian Ralat: Memerlukan semakan manual kod status respons untuk ralat HTTP.

Contoh:

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

Perbandingan Axios dan Fetch

Menghantar Permintaan GET dengan Parameter Pertanyaan

Axios:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ambil:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Menghantar Permintaan POST dengan Badan JSON

Axios:

axios.get('/api/data', { params: { name: 'Alice', age: 25 } })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Ambil:

const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Menetapkan Tamat Masa untuk Permintaan

Axios:

axios.post('/api/data', { name: 'Bob', age: 30 })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Ambil:

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 30 })
})
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Menggunakan async/wait Syntax

Axios:

axios.get('/api/data', { timeout: 5000 }) // 5 seconds
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Ambil:

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // abort after 5 seconds

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

Keserasian Ke Belakang

Axios:

• Perlu dipasang dan disertakan dalam projek anda.
• Menyokong pelayar lama dengan polyfill untuk janji dan ciri JavaScript moden yang lain.
• Dikekalkan secara aktif untuk keserasian dengan persekitaran baharu.

Ambil:

• Sokongan asli dalam penyemak imbas moden.
• Boleh diisi poli untuk menyokong pelayar lama.
• Dikemas kini secara automatik oleh vendor penyemak imbas.

Pengendalian Ralat

Axios:

Mengendalikan ralat dalam blok tangkapan dan menganggap sebarang kod status di luar 2xx sebagai ralat:

async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

Ambil:

Memerlukan semakan status manual:

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios vs Fetch: Mana Yang Terbaik?

Tiada jawapan yang pasti kerana ia bergantung pada keperluan anda:

• Gunakan Axios jika anda memerlukan ciri seperti transformasi data JSON automatik, pemintas HTTP dan pengendalian ralat lanjutan.
• Gunakan fetch() jika anda mahukan penyelesaian asli yang ringan dengan pilihan penyesuaian yang meluas.

Hasilkan Axios/Fetch Code dengan EchoAPI

EchoAPI ialah platform pembangunan API kolaboratif semua-dalam-satu yang menawarkan alatan untuk mereka bentuk, nyahpepijat, menguji dan mengejek API. EchoAPI boleh menjana kod Axios secara automatik untuk membuat permintaan HTTP.

Langkah-langkah untuk Menjana Kod Axios dengan EchoAPI:

1. Buka EchoAPI dan buat permintaan baharu.

2. Masukkan titik akhir, pengepala dan parameter API, kemudian klik "Coretan kod".

3. Pilih "Jana kod klien".

4. Salin dan tampal kod Axios yang dihasilkan ke dalam projek anda.

Kesimpulan

Kedua-dua Axios dan fetch() ialah kaedah yang berkuasa untuk membuat permintaan HTTP dalam JavaScript. Pilih yang paling sesuai dengan keperluan dan keutamaan projek anda. Menggunakan alatan seperti EchoAPI boleh meningkatkan aliran kerja pembangunan anda, memastikan kod anda tepat dan cekap. Selamat mengekod!

Atas ialah kandungan terperinci Axios vs Fetch: Mana yang Terbaik untuk Permintaan HTTP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!