Axios en React: una guía para principiantes

En la industria de la tecnología, muchos marcos frontend son populares y React es uno de ellos. Con cualquier lenguaje de fondo, usar este marco no es fácil. Para comunicarse con la base de datos, los desarrolladores deben seguir una regla específica y deben escribir una determinada línea de código. 

En React, la comunicación con el servidor backend se realiza a través del protocolo HTTP. Si es un desarrollador, es posible que esté familiarizado con la interfaz de solicitud XML Http y la API Fetch. Le permite obtener datos y realizar requests HTTP.  

Este es el método común para comunicarse con la base de datos en React. En React hay otro método para comunicarse con el servidor backend y eso requiere la instalación de una biblioteca popular Axios. 

En este artículo, analizaremos esta biblioteca, sus características clave y cómo funciona Axios en diferentes casos mientras se comunica con la base de datos. 

Introducción a Axios: Axios, que es una biblioteca popular, se usa principalmente para enviar requests HTTP asíncronas a puntos finales REST. Esta biblioteca es muy útil para realizar operaciones CRUD.

1. Esta biblioteca popular se utiliza para comunicarse con el backend. Axios admite la API Promise, nativa de JS ES6.
2. Usando Axios hacemos requests de API en nuestra aplicación. Una vez que se realiza la solicitud, obtenemos los datos en Return, y luego usamos estos datos en nuestro proyecto. 
3. Esta biblioteca es muy popular entre los desarrolladores. Puede verificar en GitHub y encontrará 78k estrellas en él. 

Antes de instalar Axios, su aplicación de proyecto React debería estar lista para instalar esta biblioteca. Cree una aplicación React siguiendo los pasos que se indican a continuación…

• Paso 1: A continuación se muestra el comando para crear la aplicación React en su proyecto…

  npx create-react-app new_files

• Paso 2: Entra en el directorio creado en el primer paso.

  cd new_files

• Paso 3: Instale la biblioteca Axios usando el comando que se indica a continuación…

  npm install axios

• Paso 4: una vez hecho esto, puede iniciar el servidor usando el comando que se indica a continuación.

  npm start

Después de la instalación de Axios, puede importar esta biblioteca a su archivo y usarla para realizar una solicitud HTTP. A continuación se muestra el fragmento de código de un archivo donde la biblioteca se importa en la parte superior…

import React from "react";
import axios from "axios";
    
class App extends React.Component {
  state = {
    newfiles: null,
  };
    
  handleFile(e) {
  
    // Getting the files from the input
    let newfiles = e.target.newfiles;
    this.setState({ newfiles });
  }
    
  handleUpload(e) {
    let newfiles = this.state.newfiles;
    
    let formData = new FormData();
    
    // Adding files to the formdata
    formData.append("image", newfiles);
    formData.append("name", "Name");
    
    axios({
  
      // Endpoint to send files
      url: "http://localhost:8080/files",
      method: "POST",
      headers: {
  
        // Add any auth token here
        authorization: "your token comes here",
      },
  
      // Attaching the form data
      data: formData,
    })
  
      // Handle the response from backend here
      .then((res) => { })
  
      // Catch errors if any
      .catch((err) => { });
  }
    
  render() {
    return (
      <div>
        <h1>Select your files</h1>
        <input
          type="file"
  
          // To select multiple files
          multiple="multiple"
          onChange={(e) => this.handleFile(e)}
        />
        <button onClick={(e) => this.handleUpload(e)}>
          Send Files
        </button>
      </div>
    );
  }
}
    
export default App;

El ejemplo anterior es solo una pequeña descripción de código para mostrar cómo usar Axios en su proyecto. Discutiremos varios métodos como GET, POST, PUT en Axios en la próxima sección.

Necesidad de Axios en React: Como hemos discutido, Axios le permite comunicarse con las API en su proyecto React. Las mismas tareas también se pueden realizar mediante el uso de AJAX, pero Axios le brinda más funciones y funciones, lo que lo ayuda a crear su aplicación rápidamente. 

Axios es una biblioteca basada en promesas, por lo que debe implementar algunas requests HTTP asincrónicas basadas en promesas. jQuery y AJAX también realizan el mismo trabajo, pero en el proyecto React, React maneja todo en su propio DOM virtual, por lo que no es necesario usar jQuery en absoluto.     

A continuación se muestra un ejemplo para obtener los datos del cliente mediante Axios…

const getCustomersData = () => {
  axios
  .get("https://jsonplaceholder.typicode.com/customers")
  .then(data => console.log(data.data))
  .catch(error => console.log(error));
  };
 getCustomersData();

Ahora pasemos al siguiente punto y entendamos cómo se pueden realizar diferentes operaciones, como obtener los datos o consumir los datos usando Axios (GET-POST-DELETE).

Solicitud GET con Axios: cree un componente MyBlog y conéctelo al ciclo de vida del componente DidMount. Importe Axios en la parte superior y obtenga los datos con Obtener solicitud.

import React from 'react';
 import axios from 'axios';
 export default class MyList extends React.Component {
  state = {
    blogs: []
  }
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      const posts = response.data;
      this.setState ({posts});
    })
  }
 render() {
  return (
   < ul >
     {this.state.posts.map (post =>  {post.title} )}
   < /ul >
  )}
 }

Aquí estamos usando axios.get (URL) para obtener una promesa que devuelve un objeto de respuesta. La respuesta devuelta se asigna al objeto de la publicación. También podemos recuperar otra información, como el código de estado, etc.

Solicitud POST con Axios: Cree un nuevo componente AddPost para requests Post. Esta solicitud agregará una publicación a la lista de publicaciones. 

import React from 'react';
import axios from 'axios';
export default class AddPost extends React.Component {
   state = {
     postTitle: '',
   }
   handleChange = event => {
     this.setState({ postTitle: event.target.value });
   }
   handleSubmit = event => {
     event.preventDefault();
       const post = {
         postName: this.state.postName
       };
     axios.post(
`https://jsonplaceholder.typicode.com/posts`, { post })
       .then(res => {
         console.log(res);
         console.log(res.data);
     })
     [Text Wrapping Break] 
     }
    render() {
         return (
         <div>
           <form onSubmit="{this.handleSubmit}">
             <label>
               Post Name:
               <input type="text" name="name" 
                     onChange="{this.handleChange}" />
             </label>
             <button type="submit">Add</button>
          </form>
        </div>
 )}}

En el código anterior, realizamos una solicitud de publicación HTTP y agregamos una nueva publicación a la base de datos. El evento onChange activa el método handleChange() y actualiza la solicitud cuando la solicitud de la API devuelve los datos correctamente.

Solicitud de eliminación con Axios: Para enviar la solicitud de eliminación al servidor se utiliza axios.delete. Debe especificar dos parámetros al realizar esta solicitud de URL y configuración opcional. 

axios.delete(url, { 
  data: { foo: "bar" }, 
  headers: { "Authorization": "******" } 
}); 

Al enviar la solicitud de eliminación, deberá configurar el cuerpo y los encabezados de la solicitud. Use config.data para este propósito. En la solicitud POST anterior, modifique el código como se indica a continuación…

handleSubmit = event => {
  event.preventDefault();
  axios.delete(
`https://jsonplaceholder.typicode.com/posts/${this.state.postName}`)
  .then(res => {
  console.log(res);
  console.log(res.data);
  })
}

Objetos de respuesta en Axios: cuando envía una solicitud al servidor, recibe un objeto de respuesta del servidor con las propiedades que se indican a continuación…

• datos: recibe datos del servidor en forma de carga útil. Estos datos se devuelven en formato JSON y se analizan nuevamente en un objeto JavaScript para usted.
• estado: Obtiene el código HTTP devuelto por el servidor.
• statusText: mensaje de estado HTTP devuelto por el servidor.
• encabezados: Todos los encabezados son devueltos por el servidor.
• config: configuración de la solicitud original.
• solicitud: objeto XMLHttpRequest real.

Objeto de error: obtendrá un objeto de error si hay un problema con la solicitud. La promesa será rechazada con un objeto de error con las propiedades dadas

• mensaje: Texto del mensaje de error. 
• respuesta: Objeto de respuesta (si se recibe). 
• solicitud: objeto XMLHttpRequest real (cuando se ejecuta en un navegador). 
• config:  configuración de solicitud original. 

Características de la biblioteca Axios

• Los datos JSON se transforman automáticamente.
• Transforma los datos de solicitud y respuesta.
• Útil para realizar requests HTTP desde Node.js
• Hace XMLHttpRequests desde el navegador.
• Proporcione soporte del lado del cliente para protegerse contra XSRF.
• Admite API de promesa.
• Posibilidad de cancelar la solicitud.

Métodos abreviados en Axios: a continuación se muestran algunos métodos abreviados de Axios…

• axios.request(config)
• axios.head(url[, config])
• axios.get(url[, configuración])
• axios.post(url[, datos[, configuración]])
• axios.put(url[, datos[, configuración]])
• axios.delete(url[, config])
• axios.options(url[, config])
• axios.patch(url[, datos[, configuración]])

Conclusión

Este artículo explica todo sobre la biblioteca Axios. Hemos discutido algunas operaciones útiles como obtener los datos, publicar los datos, actualizar los datos o eliminar los datos en Axios. Una vez que comience a trabajar en React, deberá usar esta biblioteca para comunicarse con el servidor de la base de datos. Por lo tanto, es importante practicarlo y comprender cómo funcionan las cosas en Axios.