Comunicarse con las API mediante Axios in React: una guía paso a paso

En una React aplicación, la interacción con las API es un requisito común. Axios es una biblioteca popular JavaScript que simplifica el proceso de realizar solicitudes HTTP y manejar respuestas. Esta guía paso a paso lo guiará a través del proceso de uso Axios en su React aplicación para comunicarse con las API.

 

Instalando Axios

Abra la carpeta de su proyecto en la terminal y ejecute el siguiente comando para instalar Axios: npm install axios

Importe Axios en su React componente usando el siguiente código: import axios from 'axios'

 

Envío GET de solicitudes

Para enviar una GET solicitud y obtener datos de una API, use el método. axios.get()

Ejemplo:

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

 

Envío POST de solicitudes

Para enviar una POST solicitud y enviar datos a una API, use el método. axios.post()

Ejemplo:

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

 

Manejo de errores

Axios proporciona un mecanismo integrado de manejo de errores usando el catch() método.

Ejemplo:

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

 

Integración con API RESTful

Axios es compatible con las API RESTful al permitirle especificar métodos HTTP como GET, POST, PUT y DELETE.

Ejemplo:

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

 

Al seguir estos pasos y ejemplos, podrá comunicarse de manera efectiva con las API que se utilizan Axios en su React aplicación.