close

Kuwasiliana na API kwa kutumia Axios- React Mwongozo wa Hatua kwa Hatua

Katika React programu, kuingiliana na API ni hitaji la kawaida. Axios ni JavaScript maktaba maarufu ambayo hurahisisha mchakato wa kufanya maombi ya HTTP na kushughulikia majibu. Mwongozo huu wa hatua kwa hatua utakuelekeza katika mchakato wa kutumia Axios katika programu yako React kuwasiliana na API.

 

Inasakinisha Axios

Fungua folda ya mradi wako kwenye terminal na endesha amri ifuatayo ya kusakinisha Axios: npm install axios

Ingiza Axios katika React kijenzi chako kwa kutumia nambari ifuatayo: import axios from 'axios'

 

Kutuma GET Maombi

Ili kutuma GET ombi na kuleta data kutoka kwa API, tumia mbinu. axios.get()

Mfano:

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

 

Kutuma POST Maombi

Ili kutuma POST ombi na kutuma data kwa API, tumia mbinu. axios.post()

Mfano:

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

 

Kushughulikia Makosa

Axios hutoa utaratibu wa kushughulikia makosa uliojengwa kwa kutumia catch() mbinu.

Mfano:

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

 

Kuunganishwa na API RESTful

Axios inasaidia API RESTful kwa kukuruhusu kubainisha mbinu za HTTP kama vile GET, POST, PUT, na DELETE.

Mfano:

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

 

Kwa kufuata hatua na mifano hii, utaweza kuwasiliana vyema na API ukitumia Axios katika programu yako React.