AsyncAwai en react

Vista previa del material en texto

Async/Awai en react 
 
Async/Await en React es una forma moderna y más legible de trabajar con código 
asíncrono y manejar tareas que pueden tomar tiempo en completarse, como solicitudes 
a APIs, lectura/escritura de archivos, entre otros. Async/Await es una característica de 
JavaScript introducida en ECMAScript 2017 (ES8) y se utiliza ampliamente en 
aplicaciones React para mejorar la claridad y la estructura del código asíncrono. 
 
Async/Await se basa en las Promesas (Promises) y permite escribir código asíncrono de 
manera similar a una función síncrona, lo que facilita su lectura y comprensión. En lugar 
de utilizar los métodos `then` y `catch` para manejar las Promesas, Async/Await utiliza 
las palabras clave `async` y `await`. 
 
A continuación, veamos cómo utilizar Async/Await en React con el ejemplo de una 
solicitud a una API utilizando la función `fetch`: 
 
*************************************************************** 
import React, { useState, useEffect } from 'react'; 
 
const MiComponente = () => { 
 const [datos, setDatos] = useState([]); 
 
 const fetchData = async () => { 
 try { 
 const response = await fetch('https://api.example.com/data'); 
 const data = await response.json(); 
 setDatos(data); 
 } catch (error) { 
 console.error('Error al obtener los datos:', error); 
 } 
 }; 
 
 useEffect(() => { 
 fetchData(); 
 }, []); 
 
 return ( 
 <div> 
 {datos.map(item => <p key={item.id}>{item.nombre}</p>)} 
 </div> 
 ); 
}; 
 
export default MiComponente; 
************************************************************ 
 
En este ejemplo, hemos creado una función `fetchData` con la palabra clave `async`, lo 
que la convierte en una función asíncrona. Dentro de esta función, utilizamos `await` 
antes de la llamada a `fetch` y `response.json()` para esperar a que se resuelvan las 
Promesas. De esta manera, la ejecución de la función se detiene temporalmente hasta 
que la Promesa se resuelva o se rechace. 
 
El uso de Async/Await en React (y en JavaScript en general) mejora la legibilidad del 
código asíncrono, evita el anidamiento excesivo de callbacks y facilita el manejo de 
errores. Es una forma más elegante y moderna de trabajar con código asíncrono en 
comparación con el uso tradicional de Promesas y callbacks, y se recomienda su uso 
siempre que sea posible.