Comunicarea cu API-uri folosind Axios în React- Un ghid pas cu pas

Într-o React aplicație, interacțiunea cu API-urile este o cerință comună. Axios este o JavaScript bibliotecă populară care simplifică procesul de a face cereri HTTP și de a gestiona răspunsurile. Acest ghid pas cu pas vă va ghida prin procesul de utilizare în aplicația Axios dvs. pentru a comunica cu API-urile. React

 

Instalarea Axios

Deschideți folderul de proiect în terminal și rulați următoarea comandă pentru a instala Axios: npm install axios

Importă Axios în React componentă folosind următorul cod: import axios from 'axios'

 

Trimiterea GET cererilor

Pentru a trimite o GET solicitare și a prelua date dintr-un API, utilizați metoda. axios.get()

Exemplu:

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

 

Trimiterea POST cererilor

Pentru a trimite o POST solicitare și a trimite date către un API, utilizați metoda. axios.post()

Exemplu:

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

 

Gestionarea erorilor

Axios oferă un mecanism încorporat de gestionare a erorilor folosind catch() metoda.

Exemplu:

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

 

Integrarea cu API-urile RESTful

Axios acceptă API-uri RESTful permițându-vă să specificați metode HTTP, cum ar fi GET, POST, PUT și DELETE.

Exemplu:

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

 

Urmând acești pași și exemple, veți putea comunica eficient cu API-urile utilizate în aplicația Axios dvs. React