Komunikasi karo API nggunakake Axios ing React- A Step-by-Step Guide

Ing React aplikasi, sesambungan karo API minangka syarat umum. Axios minangka JavaScript perpustakaan populer sing nyederhanakake proses nggawe panjalukan HTTP lan nangani respon. Pandhuan langkah-langkah iki bakal nuntun sampeyan liwat proses nggunakake Axios ing React aplikasi kanggo komunikasi karo API.

 

Nginstal Axios

Bukak folder proyek sampeyan ing terminal lan jalanake printah ing ngisor iki kanggo nginstal Axios: npm install axios

Impor komponen Axios sampeyan React nggunakake kode ing ngisor iki: import axios from 'axios'

 

Ngirim GET Panyuwunan

Kanggo ngirim GET panjalukan lan njupuk data saka API, gunakake cara kasebut. axios.get()

Tuladha:

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);  
  });  

 

Ngirim POST Panyuwunan

Kanggo ngirim POST panjalukan lan ngirim data menyang API, gunakake metode kasebut. axios.post()

Tuladha:

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);  
  });  

 

Nangani Kasalahan

Axios nyedhiyakake mekanisme penanganan kesalahan sing dibangun kanthi nggunakake catch() metode kasebut.

Tuladha:

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);  
    }  
  });  

 

Integrasi karo RESTful API

Axios ndhukung API RESTful kanthi ngidini sampeyan nemtokake cara HTTP kayata GET, POST, PUT, lan DELETE.

Tuladha:

// 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);  
  });  

 

Kanthi tindakake langkah lan conto iki, sampeyan bakal bisa komunikasi kanthi efektif karo API sing digunakake Axios ing aplikasi sampeyan React.