Cómo usar Axios en React

En este artículo, aprenderá a usar la biblioteca Axios en React.



Veamos todo usando el ejemplo de solicitudes al servidor, mostramos los datos recibidos en una tabla, entregamos el componente de verificación de carga y todo esto usando React Hooks.

¿Qué es Axios?

Axios es uno de los clientes HTTP más populares para navegadores y node.js. basado en promesas.



Axios tiene soporte para solicitudes, recibe respuestas del servidor, las transforma y las convierte automáticamente a JSON.



Antes de comenzar, creemos un nuevo proyecto de React:

npx create-react-app react-axios-table

Entremos en ello:

cd react-axios-table

Datos del proyecto

Usaremos una matriz de objetos como datos para nuestro proyecto:

[
	{
		id: 101,
		firstName: 'Sue',
		lastName: 'Corson',
		email: 'DWhalley@in.gov',
		phone: '(612)211-6296',
		address: {
			streetAddress: '9792 Mattis Ct',
			city: 'Waukesha',
			state: 'WI',
			zip: '22178'
		},
		description: 'et lacus magna dolor...',
	}
]

Enlace a datos

Configurar un componente para trabajar con Axios

Cargue la biblioteca de Axios:

npm i axios

Importamos axios en el componente desde el cual enviaremos solicitudes al servidor:

import axios from 'axios'

Porque en el proyecto usamos React Hooks, import useState y useEffect (lea más sobre los hooks en el react aquí ):

import React, { useEffect, useState } from 'react';

A continuación, agregue el siguiente código al componente:

function App() {
  
  const [appState, setAppState] = useState();
  
  useEffect(() => {
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });
  }, [setAppState]);

 
  return (
    <div className="app">
    
    </div>
  );
}

export default App;

Echemos un vistazo más de cerca al código:

const [appState, setAppState] = useState();

Responsable del estado del estado en el componente:

 useEffect(() => {}, [setAppState])

useEffect observará los cambios en setAppState y volverá a renderizar si es necesario

 const apiUrl=''

sustituimos nuestro enlace aquí

axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });

envíe una solicitud de obtención al servidor, luego guarde los datos JSON recibidos en el estado

Descargar componente de verificación

Cree una carpeta de componentes en src . En él, cree el componente UserData.js y agregue el siguiente código:

function UserData(props) {

    const { persons } = props

    if (!persons || persons.length === 0) return <p> .</p>

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>firstName</th>
                        <th>lastName</th>
                        <th>email</th>
                        <th>phone</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
      </div>
    )
}

export default UserData

Transferiremos los datos recibidos del servidor a los accesorios del componente.

 if (!persons || persons.length === 0) return <p> .</p>

comprobar si hay datos del servidor

{
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }

Usando el método del mapa , revisamos la matriz con personas, creamos una cadena para cada persona. No te olvides de la clave .



En la carpeta de componentes , cree LoadingPersonsData.js y pegue el siguiente código:

function OnLoadingUserData(Component) {
    return function LoadingPersonsData({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />

        else return (
            <div>
                <h1>,  !</h1>
            </div>
        )
    }
}

export default LoadingPersonsData

El código anterior es un componente de orden superior en React. Toma otro componente como accesorios y luego devuelve algo de lógica. En nuestro caso, el componente comprueba si se está cargando . Mientras se cargan los datos, mostramos el mensaje de carga, tan pronto como isLoading se vuelve falso, devolvemos el componente con los datos.



Hagamos cambios en nuestro App.js para poder verificar la carga de datos. Importemos



nuestros componentes a App.js :

import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'

Agrega el siguiente código:

function App() {

  const DataLoading =  LoadingPersonsData(UserData);

  const [appState, setAppState] = useState(
    {
      loading: false,
      persons: null,
    }
  )

 useEffect(() => {
    setAppState({loading: true})
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState({
      loading: false,
      persons: allPersons
       });
    });
  }, [setAppState]);


  return (
    <div className="app">
        <DataLoading isLoading={appState.loading} persons={appState.persons} />
    </div>
  );
}

export default App;

 const DataLoading =  LoadingPersonsData(UserData);

Creamos un nuevo componente, lo equiparamos a nuestro componente de orden superior y envolvemos un UserData (componente de visualización de datos) con él.



Agregamos una nueva propiedad loading: false al estado , por el cual determinaremos la carga de datos del servidor.

<DataLoading isLoading={appState.loading} persons={appState.persons} />

Renderice el componente y pase los accesorios a nuestro componente de orden superior. Agreguemos



algunos css y al cargar los datos, veremos la siguiente ventana:







Y ahora, cuando la solicitud get al servidor se complete con éxito, se reciben los datos:







ahora sabemos cómo usar Axios get con la API REST.



Si tiene alguna pregunta o sugerencia, déjela en los comentarios. Estaré encantado de responder.