Axios vs Fetch: Mana yang Terbaik untuk Permintaan HTTP

Permintaan HTTP sangat penting untuk berkomunikasi dengan server dan API dalam aplikasi web. Ada banyak cara untuk membuat permintaan HTTP di JavaScript, tetapi dua yang paling populer adalah Axios dan fetch(). Dalam postingan ini, kita akan membandingkan dan membedakan Axios dan Fetch() dan melihat mana yang terbaik untuk skenario yang berbeda.

tombol

Apa itu Axios?

Axios adalah pustaka pihak ketiga yang menyediakan klien HTTP berbasis promise untuk membuat permintaan HTTP. Axios banyak digunakan dalam komunitas JavaScript dan dikenal karena kesederhanaan dan fleksibilitasnya

Sintaks Dasar Axios

Sintaks dasar pustaka Axios adalah sebagai berikut:

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

Fitur utama:

Dapat menerima objek yang berisi URL dan konfigurasi sebagai parameter, atau URL dan objek konfigurasi terpisah.
Menggunakan properti data untuk mengirim data ke server, secara otomatis menangani konversi JSON.
Mengembalikan data server secara langsung dalam properti data dari objek respons.
Secara otomatis menangani kode status kesalahan HTTP, meneruskannya ke blok catch.
Menyediakan mekanisme penanganan kesalahan yang lebih efisien.

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 merespons dengan:', error.response.status);
    } else if (error.request) {
      console.error('Tidak ada respons yang diterima');
    } else {
      console.error('Error:', error.message);
    }
  });

Mengapa Anda Harus Menggunakan Axios?

Ia memiliki banyak fitur yang membuatnya mudah dan nyaman digunakan, seperti:

Transformasi data JSON otomatis: Axios secara otomatis mengonversi data ke dan dari JSON, jadi Anda tidak perlu mengurai atau membuat string secara manual.
Waktu tunggu respons: Axios memungkinkan Anda untuk mengatur waktu tunggu untuk permintaan Anda, sehingga Anda dapat menangani kesalahan jika server terlalu lama merespons.
Interseptor HTTP: Axios memungkinkan Anda mencegat permintaan dan respons sebelum ditangani oleh then atau catch, sehingga Anda dapat memodifikasinya atau menambahkan logika tambahan.
Progres unduhan: Axios dapat melacak progres unduhan dan unggahan Anda, sehingga Anda dapat menampilkan umpan balik kepada pengguna atau membatalkan permintaan jika diperlukan.
Permintaan simultan: Axios dapat membuat beberapa permintaan pada saat yang sama dan menggabungkannya menjadi satu respons menggunakan axios.all dan axios.spread.

Apa itu Fetch()?

fetch() adalah API bawaan yang disertakan dengan JavaScript asli. Ini adalah API web asinkron yang mengembalikan data dalam bentuk promise. fetch() didukung oleh semua browser modern, jadi Anda tidak perlu mengimpor pustaka eksternal apa pun untuk menggunakannya. Beberapa fitur fetch() adalah:

Sintaks dasar: fetch() memiliki sintaks yang sederhana dan ringkas yang mengambil URL sumber daya yang ingin Anda ambil sebagai argumen pertama dan objek opsi opsional sebagai argumen kedua.
Kompatibilitas mundur: fetch() dapat digunakan di browser lama yang tidak mendukungnya dengan menggunakan polyfill, seperti whatwg-fetch atau fetch-ponyfill.
Dapat disesuaikan: fetch() memberi Anda lebih banyak kendali atas permintaan dan respons Anda, karena Anda dapat menyesuaikan header, body, method, mode, kredensial, cache, pengalihan, dan kebijakan perujuk.

Bagaimana Cara Menggunakan Axios untuk Membuat Permintaan HTTP?

Untuk menggunakan Axios, Anda perlu menginstalnya menggunakan npm atau yarn:

npm install axios

Dan berikut cara menginstal Axios menggunakan yarn:

yarn add axios

Jika Anda lebih suka menggunakan pnpm, Anda dapat menginstal Axios menggunakan perintah berikut:

pnpm install axios

Atau, Anda dapat menggunakan jaringan pengiriman konten (CDN) untuk menyertakan Axios dalam proyek Anda. Berikut cara menyertakan Axios menggunakan CDN:

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

Kemudian, Anda dapat mengimpornya dalam file JavaScript Anda dan menggunakannya untuk membuat permintaan HTTP. Misalnya, untuk membuat permintaan GET ke URL, Anda dapat menggunakan axios.get():

import axios from 'axios';

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

Membuat Permintaan HTTP dengan Fetch

Untuk menggunakan fetch(), Anda tidak perlu menginstal apa pun, karena sudah tersedia di browser. Anda dapat menggunakan fungsi fetch() untuk membuat permintaan HTTP. Misalnya, untuk membuat permintaan GET ke URL, Anda dapat menggunakan fetch() seperti ini:

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

Perhatikan bahwa:

Axios secara otomatis mengubah data ke dan dari JSON, sementara fetch() mengharuskan Anda memanggil response.json() untuk mengurai data ke objek JavaScript.
Axios menyediakan data dalam objek respons, sementara fetch() menyediakan objek respons itu sendiri, yang berisi informasi lain seperti status, header, dan url.
Axios menangani kesalahan di blok catch, sementara fetch() hanya menolak promise jika ada kesalahan jaringan, bukan jika respons memiliki status kesalahan.

Sintaks Dasar Fetch

Tentu. Saya akan menyediakan konten dalam bahasa Inggris, yang diatur menjadi dua bagian terpisah seperti yang diminta.

Sintaks dasar Fetch API adalah sebagai berikut:

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

Fitur utama:

URL sebagai argumen pertama, objek konfigurasi opsional sebagai argumen kedua.
Menggunakan properti body untuk mengirim data ke server, yang memerlukan konversi manual data ke string.
Mengembalikan objek Respons yang berisi informasi respons lengkap.
Hanya memasuki blok catch pada kesalahan jaringan, bukan pada kode status kesalahan HTTP.
Memerlukan pemeriksaan manual kode status respons untuk menangani kesalahan HTTP.

Contoh:

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('Kesalahan HTTP ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios vs Fetch: Mengirim Permintaan GET dengan Parameter Kueri:

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

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

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

Axios vs Fetch: Mengirim Permintaan POST dengan Body JSON:

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

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

Axios vs Fetch: Mengatur Waktu Tunggu untuk Permintaan:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5 detik
})
.then(response => {
  // tangani respons
})
.catch(error => {
  // tangani kesalahan
});

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

setTimeout(() => {
  controller.abort(); // batalkan setelah 5 detik
}, 5000);

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

Axios vs Fetch: Menggunakan sintaks async/await:

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

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

Axios vs Fetch: Kompatibilitas Mundur

Kompatibilitas mundur mengacu pada kemampuan sistem atau aplikasi yang lebih baru untuk bekerja dengan versi lama, memastikan transisi yang lancar dan mencegah gangguan atau kerusakan saat meningkatkan. Ini sangat penting dalam pengembangan perangkat lunak, pengembangan web, dan ekosistem teknologi untuk menjaga stabilitas, kompatibilitas, dan versi serta platform yang konsisten.

Axios:

Axios adalah pustaka pihak ketiga yang perlu diinstal dan disertakan dalam proyek Anda.
Ini mendukung browser lama dengan menyertakan polyfill untuk promise dan fitur JavaScript modern lainnya.
Axios secara aktif dipelihara dan mengikuti pembaruan browser dan Node.js terbaru, memastikan kompatibilitas dengan lingkungan baru.
Namun, karena ini adalah pustaka terpisah, Anda perlu memastikan bahwa Anda menggunakan versi yang kompatibel dengan dependensi proyek Anda.

Fetch:

Fetch API adalah API Web asli yang didukung oleh browser modern.
Ini memiliki dukungan yang sangat baik di versi browser terbaru, tetapi browser lama (seperti Internet Explorer) tidak mendukungnya secara asli.
Jika Anda perlu mendukung browser lama, Anda perlu menyertakan polyfill atau menggunakan solusi fallback (misalnya, XMLHttpRequest).
Karena ini adalah API asli, API ini secara otomatis diperbarui dan dipelihara oleh vendor browser, memastikan kompatibilitas dengan versi browser di masa mendatang.

Axios vs Fetch: Penanganan Kesalahan

Penanganan kesalahan adalah aspek penting dalam membuat permintaan HTTP, karena memungkinkan Anda menangani berbagai skenario seperti kegagalan jaringan, kesalahan server, atau respons yang tidak valid. Fetch dan Axios memiliki cara yang berbeda dalam menangani kesalahan, yang akan saya bandingkan dengan beberapa contoh.

Axios:

Di Axios, jika ada kegagalan permintaan, itu akan memunculkan kesalahan dan Anda dapat dengan mudah menangani kesalahan dengan blok try-catch dan mendapatkan data kesalahan dari error.response.data. Misalnya:

// Penanganan kesalahan Axios dengan try-catch
try {
  const response = await axios.get('/api/data');
  // tangani respons
} catch (error) {
  // tangani kesalahan
  console.log(error.response.data);
}

Fetch:

Di Fetch, jika ada kegagalan permintaan, itu tidak akan memunculkan kesalahan, tetapi mengembalikan objek respons dengan properti ok yang diatur ke false. Anda harus memeriksa properti ok dan memunculkan kesalahan secara manual jika Anda ingin menggunakan blok try-catch.

Atau, Anda dapat menggunakan properti response.ok untuk menangani berbagai kasus dalam metode then. Misalnya:

// Penanganan kesalahan Fetch dengan try-catch
try {
  const response = await fetch('/api/data');
  // periksa status respons
  if (!response.ok) {
    // munculkan kesalahan jika status tidak ok
    throw new Error(`Kesalahan HTTP! status: ${response.status}`);
  }
  // tangani respons
} catch (error) {
  // tangani kesalahan
  console.log(error.message);
}

// Penanganan kesalahan Fetch dengan response.ok
fetch('/api/data')
  .then(response => {
    // periksa status respons
    if (response.ok) {
      // tangani respons
    } else {
      // tangani kesalahan
      console.log(`Kesalahan HTTP! status: ${response.status}`);
    }
  })
  .catch(error => {
    // tangani kesalahan jaringan
    console.log(error.message);
  });

Perbedaan lain antara Fetch dan Axios adalah bagaimana mereka menangani kode status non-200. Axios menganggap kode status apa pun di luar rentang 2xx sebagai kesalahan dan menolak promise. Fetch menganggap respons HTTP valid apa pun (bahkan 4xx atau 5xx) sebagai keberhasilan dan menyelesaikan promise.

Ini berarti Anda harus menangani kode status non-200 secara berbeda di Fetch dan Axios. Misalnya:

// Penanganan kesalahan Axios untuk kode status non-200
axios.get('/api/data')
  .then(response => {
    // tangani respons
  })
  .catch(error => {
    // tangani kesalahan
    if (error.response) {
      // server merespons dengan kode status di luar 2xx
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // kesalahan jaringan atau permintaan dibatalkan
      console.log(error.message);
    }
  });

// Penanganan kesalahan Fetch untuk kode status non-200
fetch('/api/data')
  .then(response => {
    // periksa status respons
    if (response.ok) {
      // tangani respons
    } else {
      // server merespons dengan kode status di luar 2xx
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // tangani data kesalahan
    console.log(data);
  })
  .catch(error => {
    // tangani kesalahan jaringan atau permintaan dibatalkan
    console.log(error.message);
  });

Axios vs Fetch: Mana yang Terbaik untuk Membuat Permintaan HTTP?

Tidak ada jawaban pasti mana yang lebih baik, karena itu tergantung pada preferensi dan kebutuhan Anda. Namun, berikut adalah beberapa panduan umum untuk membantu Anda memutuskan:

Gunakan Axios jika Anda menginginkan cara yang sederhana dan nyaman untuk membuat permintaan HTTP, dengan fitur-fitur seperti transformasi data JSON otomatis, waktu tunggu respons, interseptor HTTP, progres unduhan, dan permintaan simultan.
Gunakan fetch() jika Anda menginginkan cara asli dan dapat disesuaikan untuk membuat permintaan HTTP, dengan fitur-fitur seperti kompatibilitas mundur, header khusus, body, method, mode, kredensial, cache, pengalihan, dan kebijakan perujuk.

Hasilkan Kode Axios/Fetch dengan Apidog

Apidog adalah platform pengembangan API kolaboratif all-in-one yang menyediakan toolkit komprehensif untuk mendesain, men-debug, menguji, menerbitkan, dan mengejek API. Apidog memungkinkan Anda membuat kode Axios secara otomatis untuk membuat permintaan HTTP.

tombol

Berikut adalah proses untuk menggunakan Apidog untuk menghasilkan kode Axios:

Langkah 1: Buka Apidog dan pilih permintaan baru

Langkah 2: Masukkan URL endpoint API yang ingin Anda kirimi permintaan,imasukkan header atau parameter string kueri yang ingin Anda sertakan dengan permintaan, lalu klik "Desain" untuk beralih ke antarmuka desain Apidog.

Langkah 3: Pilih "Hasilkan kode klien" untuk menghasilkan kode Anda.

Langkah 4: Salin dan tempel kode Axios yang dihasilkan ke dalam proyek Anda.

Menggunakan Apidog untuk Mengirim Permintaan HTTP

Apidog menawarkan beberapa fitur canggih yang semakin meningkatkan kemampuannya untuk menguji permintaan HTTP. Fitur-fitur ini memungkinkan Anda menyesuaikan permintaan dan menangani skenario yang lebih kompleks dengan mudah.

tombol

Langkah 1: Buka Apidog dan buat permintaan baru.

Langkah 2: Temukan atau masukkan secara manual detail API untuk permintaan POST yang ingin Anda buat.

Langkah 3: Isi parameter yang diperlukan dan data apa pun yang ingin Anda sertakan dalam body permintaan.

Kesimpulan

Baik Axios maupun fetch() adalah metode yang ampuh dan andal untuk membuat permintaan HTTP di JavaScript. Anda dapat memilih salah satu yang paling sesuai dengan proyek dan gaya Anda, atau bahkan menggunakan keduanya untuk tujuan yang berbeda. Yang penting adalah memahami cara kerjanya dan cara menggunakannya secara efektif.

Menggunakan Apidog tidak hanya menghemat waktu dan tenaga Anda yang berharga, tetapi juga memastikan bahwa kode Anda akurat dan bebas kesalahan. Dengan antarmuka yang ramah pengguna dan fitur-fitur intuitif, Apidog adalah alat yang harus dimiliki oleh setiap pengembang yang bekerja dengan permintaan Axios. Selamat membuat kode!

tombol