Promesas en Javascript para React y TypeScript

Para empezar a hablar sobre promesas debemos conocer el concepto de asincronismo como ya lo sabemos es realizar acciones o tareas sin esperar que un proceso anterior se realice, algo as como en segundo plano para ejemplificar ms fcil este concepto, entonces que es una promesa como dice el significado mismo de la palabra algo que esperamos que se cumpla en un futuro prximo aunque tambin puede no cumplirse y fallar.

Primero empecemos con un ejemplo de la vida cotidiana imaginemos que vamos a comprar comida una hamburguesa est bien, llegamos al mostrador pedimos la hamburguesa, pagamos, nos dan un ticket con el cual debemos esperar y quedaremos pendiente, mientras nos preparan la hamburguesa tomamos el celular quiz escribimos un mensaje o revisamos las redes sociales esperando, una vez esta lista, nos llaman, entregamos el ticket y recibimos lo que esperamos a cambio nuestra comida, un simple caso de xito sin embargo tambin puede fallar puede que nos llamen y nos digan que las hamburguesas se terminaron, entonces ambos escenarios son posibles en esa simplicidad se basan las promesas aunque en javascript no es tan sencillo pero ya lo veremos a continuacin

El por qu de las promesas? el cdigo asncrono tiene su forma de manejarse y debido a que pueden surgir eventos innesperados como (fallos de red) hay la necesidad de manejar errores por lo tanto usar solo callbacks o devoluciones de llamada puede ser muy complejo, las promesas tratan de solucionar este tema

Qu es una promesa en JavaScript es un objeto que devolver un valor en el futuro

Crear

Quiz estemos desarrollando una API de lado del backend que se va a utilizar luego por lo que podemos crear una funcin que retorne una promesa y se pueda consumir de lado del front o en algn servicio en especfico y asegurar un mejor manejo del flujo de los datos y los errores

Por lo tanto existen tres estados posibles en la creacin de una promesa:

• xito - resolver -> resolve(value)
• Fracaso - rechazar -> reject (error)
• Pendiente (pending)

Consumir

Quiz estemos desarrollando una aplicacin en el Fronted y tenemos que consumir APIs que retornan promesas, un ejemplo es la api de Fetch aunque puede ser cualquiera, entonces debemos conocer como estas funcionan para hacer el uso correctamente

Entonces para el consumo de una promesa existen los siguiente mtodos conocidos como manejadores

• .then() -> si la promesa se resuelve con xito
• .catch() -> si la promesa falla
• .finally() -> si la promesa ha sido ejecutada sea xito o falla

Y bueno antes de entrar al cdigo con todo este prembulo lo ms importante es saber para que las vas a usar en tu da a da programando en javascript y son dos usos esenciales, van de la mano pero puede que un da estemos de un lado pero al siguiente estemos del otro en s es como back y front

Sintaxis
Para su creacin se utiliza new Promise, recibe una funcin ejecutora que tiene dos callbacks resolve y reject

new Promise( function (resolve, reject) { ... } ) ;

Creacin

const promiseExample = new Promise( (resolve, reject) => {     if (condition) {       resolve("data ...");    } else {       reject( "error");    }});

Consumo

promiseExample.then( (data) => { ... } )                            .catch( (err) => { ... } )

Ejemplo real

Tenemos un objeto que contiene informacin de autos de lujo vamos a crear una funcin que nos permita buscar estos autos por su id y retornar una promesa para us uso posterior

const autos = {   buggati: {     nombre: 'Veyron'     marca: 'Buggati'   },   camaro:{     nombre: 'Camaro',    marca: 'Chevrolet'   },  mustang:{     nombre: 'Mustang',     marca: 'Ford'   }}

export const buscarAuto = ( id ) => {  const auto = autos[id];  return new Promise( (resolve, reject) =>{    if(auto){       resolve(auto);    } else {      reject(`No existe un auto con el ${id}`);     }});}

Ahora vamos a usar la promesa quiz en otro archivo, en el que podemos importar la funcin

const autoId1= 'buggati';buscarAuto ( autoId1 ).then( auto => {   console.log(`El auto ${auto.nombre} existe`);}.catch ( err => {     alert(err);})

Encadenamiento de promesas

En ocasiones al consumir una promesa esta devuelve otra promesa y as puede pasar hasta n veces, por lo que nos vemos obligados a usar varios manjeadores .then() para poder obtener el resultado esperado un ejemplo es al usar el mecanismos fetch

En este ejemplo hacemos solicitud a una api y primero obtenemos el archivo json con los datos luego en estos datos obtenemos el que deseamos

fetch('api/encadenamiento-promesas/pokemon.json').then( response => response.json() ).then( pokemon => console.log(pokemon.name) )

Y as podemos seguir encadenando promesas de acuerdo al requerimiento, en un prximo artculo veremos como solucionar esto con async/ await

Finalmente un ejemplo dentro de React y TypeScript y usando un mtodo de las promesas all

En este caso se hacen varias peticiones a una API de Peliculas y se necesita crear un hook personalizado que combine useEffect y useState

Primero tenemos la creacin de la instancia de axios para el consumo de la api

const movieDB = axios.create({   baseURL: 'https://api.themoviedb.org/3/movie',   params: {    api_key: 'xxxxxxx',    language: 'es-ES',}});export default movieDB

Luego en la creacin de hook importamos las interfaces de las movies y creamos una interface para el Estado que tendran los diferentes tipos de peliculas a consumir

import {Movie, MovieDBMoviesResponse} from '../interfaces/movieInterface';interface MoviesState {  nowPlaying: Movie[];  popular: Movie[];  topRated: Movie[];  upcoming: Movie[];}

Con esta interfaz creada podemos tipar las respuestas que tendrn el hook useState en las movies y el valor inicial

  const [moviesState, setMoviesState] = useState<MoviesState>({    nowPlaying: [],    popular: [],    topRated: [],    upcoming: [],  });

Ahora se crear una funcin para obtener el resultado de la consulta a los distintos enpoints usando la instancia de axios creada colocando los tipos correspondiente y pasando la ruta para cada una, luego agrupamos las promesas de cada peticin y usamos el Promise.all para obtener los resultados y setear el estado

  const getMovies = async () => {    const nowPlayingPromie = movieDB.get<MovieDBMoviesResponse>('/now_playing');    const popularPromise = movieDB.get<MovieDBMoviesResponse>('/popular');    const topRatedPromise = movieDB.get<MovieDBMoviesResponse>('/top_rated');    const upcomingPromise = movieDB.get<MovieDBMoviesResponse>('/upcoming');    const resps = await Promise.all([      nowPlayingPromie,      popularPromise,      topRatedPromise,      upcomingPromise,    ]);    setMoviesState({      nowPlaying: resps[0].data.results,      popular: resps[1].data.results,      topRated: resps[2].data.results,      upcoming: resps[3].data.results,    });    setIsLoading(false);  };

Llamamos la funcin getMovies con ayuda del hook useEffect

  useEffect(() => {    getMovies();  }, []);

y finalmente retornamos el un objeto con todos los resultados obtenidos en el movieState de los distintos arreglos de la peticiones realizadas a la API con ayuda del parmetro rest

  return {    ...moviesState,    isLoading,  };

Cdigo completo

import {useEffect, useState} from 'react';import movieDB from '../api/movieDB';import {Movie, MovieDBMoviesResponse} from '../interfaces/movieInterface';interface MoviesState {  nowPlaying: Movie[];  popular: Movie[];  topRated: Movie[];  upcoming: Movie[];}export const useMovies = () => {  const [isLoading, setIsLoading] = useState(true);  const [moviesState, setMoviesState] = useState<MoviesState>({    nowPlaying: [],    popular: [],    topRated: [],    upcoming: [],  });  const getMovies = async () => {    const nowPlayingPromise = movieDB.get<MovieDBMoviesResponse>('/now_playing');    const popularPromise = movieDB.get<MovieDBMoviesResponse>('/popular');    const topRatedPromise = movieDB.get<MovieDBMoviesResponse>('/top_rated');    const upcomingPromise = movieDB.get<MovieDBMoviesResponse>('/upcoming');    const resps = await Promise.all([      nowPlayingPromise,      popularPromise,      topRatedPromise,      upcomingPromise,    ]);    setMoviesState({      nowPlaying: resps[0].data.results,      popular: resps[1].data.results,      topRated: resps[2].data.results,      upcoming: resps[3].data.results,    });    setIsLoading(false);  };  useEffect(() => {    getMovies();  }, []);  return {    ...moviesState,    isLoading,  };};