Axios Untuk Pemula

Axios adalah sebuah library JavaScript yang memungkinkan kita untuk mengirim HTTP request (misalnya, untuk mengambil data dari sebuah API atau untuk mengirim data ke API) ke server.

Axios memudahkan kita untuk melakukan operasi HTTP tanpa harus menggunakan fitur built-in browser seperti XMLHttpRequest atau fetch.

Untuk menggunakan Axios, pertama-tama kita perlu memasangnya di proyek yang sedang kita kerjakan. Kita dapat melakukannya dengan menjalankan perintah npm (jika kita menggunakan npm) atau yarn (jika kita menggunakan yarn) berikut:

npm install axios

atau

yarn add axios

Setelah Axios terpasang, kita dapat mengimpor library tersebut di dalam proyek kita dengan cara seperti ini:

import axios from 'axios';

Atau, jika kita tidak menggunakan ES6 import, kita dapat menggunakan require:

const axios = require('axios');

Setelah Axios terpasang dan diimpor ke dalam proyek kita, kita dapat mulai menggunakannya untuk mengirim HTTP request. Berikut adalah contoh sederhana untuk mengirim request GET ke sebuah API:

axios.get('https://api.example.com/endpoint')
  .then(response => {
    // handling sukses
  })
  .catch(error => {
    // handling error
  });

Request GET di atas akan mengirim HTTP request ke alamat URL yang diberikan, dan kemudian akan memanggil callback then jika request tersebut berhasil, atau memanggil callback catch jika terjadi error.

Kita juga dapat menambahkan parameter ke request GET dengan cara seperti ini:

axios.get('https://api.example.com/endpoint', {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
})
  .then(response => {
    // handling sukses
  })
  .catch(error => {
    // handling error
  });

Untuk mengirim request POST, kita dapat menggunakan metode post yang sama seperti get, namun dengan menambahkan data yang akan dikirim ke server sebagai argument kedua:

axios.post('https://api.example.com/endpoint', {
    key1: 'value1',
    key2: 'value2'
})
  .then(response => {
    // handling sukses
  })
  .catch(error => {
    // handling error
  });

Request POST di atas akan mengirimkan dalam bentuk application/json, jika kita ingin mengirimkan request dalam bentuk application/x-www-form-urlencoded kita dapat menuliskannya dengan cara berikut:

const form = new URLSearchParams();
form.append('param1', 'value1');
form.append('param2', 'value2');

axios.post('https://api.example.com/endpoint', form)
  .then(response => {
    // handling sukses
  })
  .catch(error => {
    // handling error
  });

Kita juga dapat menambahkan pengaturan tambahan seperti headers atau timeout kedalam request dengan menambahkan objek konfigurasi sebagai argumen ketiga ke metode post:

axios.post('https://api.example.com/endpoint', {
  key1: 'value1',
  key2: 'value2'
}, {
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 1000
})
  .then(response => {
    // handling sukses
  })
  .catch(error => {
    // handling error
  });

Selain metode get dan post, Axios juga menyediakan beberapa metode lain yang dapat digunakan untuk mengirim HTTP request seperti delete, put, dan patch. Kita dapat menggunakan metode-metode tersebut dengan cara yang sama seperti yang telah dijelaskan di atas.

Untuk lebih lengkapnya, kita dapat mengacu pada dokumentasi Axios di sini: https://github.com/axios/axios

Semoga membantu!