Promesas (Promises) en REACT

Vista previa del material en texto

Promesas (Promises) en REACT 
 
En React, las Promesas (Promises) son un mecanismo para trabajar con operaciones 
asíncronas, como realizar solicitudes a APIs, cargar imágenes o archivos, y otras tareas 
que pueden tomar tiempo en completarse. Una Promesa representa un valor que puede 
estar disponible ahora, en el futuro o nunca. Las Promesas en React son una forma de 
gestionar el flujo de datos asíncronos y manejar los resultados o errores que se 
resuelven en el futuro. 
 
Las Promesas en JavaScript tienen tres estados posibles: 
 
1. Pending (pendiente): El estado inicial de una Promesa. La Promesa está en proceso 
y aún no se ha resuelto ni rechazado. 
 
2. Fulfilled (cumplida): La Promesa se ha resuelto exitosamente y ha devuelto un 
valor. 
 
3. Rejected (rechazada): La Promesa ha sido rechazada y ha devuelto un error. 
 
Para trabajar con Promesas en React, generalmente se utilizan las funciones `fetch` para 
realizar solicitudes a APIs y las Promesas para manejar la respuesta. La función `fetch` 
devuelve una Promesa que se puede encadenar con el método `then` para manejar la 
respuesta exitosa, o el método `catch` para manejar errores. 
 
Ejemplo de cómo utilizar una Promesa en React con `fetch`: 
 
***************************************************************** 
import React, { useState, useEffect } from 'react'; 
 
const MiComponente = () => { 
 const [datos, setDatos] = useState([]); 
 
 useEffect(() => { 
 fetch('https://api.example.com/data') 
 .then(response => response.json()) 
 .then(data => setDatos(data)) 
 .catch(error => console.error('Error al obtener los datos:', error)); 
 }, []); 
 
 return ( 
 <div> 
 {datos.map(item => <p key={item.id}>{item.nombre}</p>)} 
 </div> 
 ); 
}; 
 
export default MiComponente; 
********************************************************************** 
 
En este ejemplo, hemos utilizado `fetch` para realizar una solicitud a una API ficticia en 
la URL `https://api.example.com/data`. La función `fetch` devuelve una Promesa que se 
encadena con el método `then` para obtener los datos de la respuesta como JSON y 
luego se actualiza el estado del componente con los datos recibidos. Si ocurre algún 
error durante la solicitud, el método `catch` maneja el error e imprime un mensaje en la 
consola. 
 
Las Promesas en React (y JavaScript en general) son una forma poderosa y efectiva de 
trabajar con código asíncrono y manejar tareas que pueden tomar tiempo en 
completarse. Permiten escribir código más legible y manejar el flujo de datos asíncronos 
de manera clara y estructurada.