¿Qué son los componentes asíncronos?

React Async es un módulo que se usa ampliamente para obtener datos del backend. El modelo de metal de React Async es el componente primero. Al usarlo, podemos realizar la carga de datos en el nivel del componente mismo. Este componente se denomina componente asíncrono. 

Requisito previo: Introducción e instalación ReactJS

Creación de la aplicación React y la instalación del módulo:

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella con el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia react-async usando el siguiente comando:

npm i react-async

Estructura del proyecto: Se verá así:

 

Ejemplo: En este ejemplo, primero estamos creando un componente llamado Imagen, donde estamos importando useFetch hook ‘react-async’. Además, estamos obteniendo datos y errores de la API https://dog.ceo/api/breeds/image/random, que muestra imágenes aleatorias de perros a través del gancho useFetch. El enlace toma el destino, es decir, el enlace del recurso, y luego lo sigue el encabezado.

Ahora la API proporciona mensajes y estados como este,

{
   «mensaje»: «https://images.dog.ceo/breeds/terrier-australian/n02096294_2688.jpg»,
   «estado»: «éxito»
}

Ahora, si recibimos un error, mostrará el mensaje de error o, de lo contrario, el mensaje de datos, que es el hipervínculo de la imagen, se almacenará en una variable con el nombre imgSrc, además, lo pasaremos a la etiqueta de la imagen para que se represente.

Aplicación.js

import { useFetch } from "react-async";
const Image = () => {
    var imgSrc = "";
    const { data, error } = useFetch(
        `https://dog.ceo/api/breeds/image/random`, {
        headers: { accept: "application/json" },
    });
    if (error) return error.message;
    if (data) imgSrc = data.message;
    return (
        <>
            <img src={imgSrc} />
        </>
    );
};
  
function App() {
    return (
        <div className="App">
            <h1>Image using the Dog API</h1>
            <Image />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Vaya a su navegador y abra http://localhost:3000/ , aparecerá una imagen de un perro con el encabezado «Imagen usando la API para perros».

 

Referencia: https://docs.react-async.com/