Berkomunikasi dengan API menggunakan Axios di React- Panduan Langkah demi Langkah

Dalam React aplikasi, berinteraksi dengan API adalah persyaratan umum. Axios adalah JavaScript pustaka populer yang menyederhanakan proses membuat permintaan HTTP dan menangani respons. Panduan langkah demi langkah ini akan memandu Anda melalui proses penggunaan Axios dalam aplikasi Anda React untuk berkomunikasi dengan API.

 

Menginstal Axios

Buka folder proyek Anda di terminal dan jalankan perintah berikut untuk menginstal Axios: npm install axios

Impor komponen Axios Anda React menggunakan kode berikut: import axios from 'axios'

 

Mengirim GET Permintaan

Untuk mengirim GET permintaan dan mengambil data dari API, gunakan metode ini. axios.get()

Contoh:

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

 

Mengirim POST Permintaan

Untuk mengirim POST permintaan dan mengirim data ke API, gunakan metode ini. axios.post()

Contoh:

axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    // Handle the response data  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle any errors  
    console.error(error);  
  });  

 

Menangani Kesalahan

Axios menyediakan mekanisme penanganan kesalahan bawaan menggunakan catch() metode ini.

Contoh:

axios.get('https://api.example.com/data')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    // Handle the error  
    if(error.response) {  
      // The request was made, but the server responded with an error status code  
      console.error(error.response.data);  
    } else if(error.request) {  
      // The request was made but no response was received  
      console.error(error.request);  
    } else {  
      // Something else happened while setting up the request  
      console.error(error.message);  
    }  
  });  

 

Mengintegrasikan dengan RESTful API

Axios mendukung RESTful API dengan memungkinkan Anda menentukan metode HTTP seperti GET, POST, PUT, dan DELETE.

Contoh:

// GET request with query parameters
axios.get('https://api.example.com/data', { params: { page: 1, limit: 10 } })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// POST request with data
axios.post('https://api.example.com/data', { name: 'John', age: 25 })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// PUT request to update existing data  
axios.put('https://api.example.com/data/1', { name: 'John Doe' })  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  
  
// DELETE request to remove data  
axios.delete('https://api.example.com/data/1')  
  .then(response => {  
    console.log(response.data);  
  })  
  .catch(error => {  
    console.error(error);  
  });  

 

Dengan mengikuti langkah dan contoh ini, Anda akan dapat berkomunikasi secara efektif dengan API yang digunakan Axios dalam aplikasi Anda React.