He dedicado la mañana a estudiar sobre las peticiones HTTP en JS puro, pero debo volver un par de días atrás a repasar las promesas y continuar con la publicación que inicié en el día de ayer sobre este tema.
Te animo a echarle un ojo a la misma, y, sobretodo, a los artículos a los que hago referencia al final.
Voy a intentar ser más directo y escueto, y dejar la mayor cantidad de información externa posible, ya que, si me explayo tanto, al final voy a perder el hábito de publicar lo que he visto durante el día.
( … )
Como veíamos ayer, las promesas son la fórmula que nos va a permitir hacer peticiones externas a otras API’s, bases de datos, servidores … y ejecutar ciertas partes del código en función de lo devuelto por las mismas y una vez que se obtenga una respuesta.
Se definen también como objetos que representan el eventual resultado de una operación asíncrona.
Las promesas pueden estar en uno de los siguientes estados:
- Pendiente
- Cumplida
- Rechazada
Vamos a picar código…
Para construir una promesa es habitual usar la siguiente sintaxis:
const myPromise = new Promise ((resolve, reject) => {(..)});Como vemos, estamos creando un nuevo objeto en base a una clase (Promise) que recibe una función de “callback” con 2 argumentos: resolve y reject, (puedes llamarlos “paco” y “susan” si eso te hace feliz, porque va a funcionar igual si mantienes el esquema, pero por convenio se suele utilizar “resolve” y “reject”).
Ya veremos que hay otra forma de generar promesas introducida con ES5 …
async ... await(Bastante más intuitiva)
(…)
Al final, todas las promesas llegan siempre a un estado de “completadas”, sea su resultado positivo (resolve) o negativo (reject).
Una vez que hemos obtenido un resultado, debemos hacer algo con este. Para eso tenemos los métodos
.then()y
.catch()Aunque ambos se utilizan por comodidad en la comprensión del código, “.then()” puede cubrir ambos casos (qué hacer si el resultado es resolve o reject) ya que se trata de una “función de alto grado” que toma como argumento otras dos funciones:
onfulfilled();onrejected();
Vuelvo a decir que, en este caso, los nombres son formalismos y estas dos funciones pueden (y deben) recibir otros nombres que indiquen mejor cuál es su función (valga la redundancia).
Ojo: .then() y .catch() son métodos que devuelven como resultado otra promesa, y esto hay que tenerlo en cuenta.
Vamos con un ejemplo práctico sacado de Codecademy:
- Definimos la promesa que vamos a generar, en este ejemplo, para tener un resultado impredecible, vendrá determinado por un random entre 0–1:
let myPromise = new Promise((resolve, reject) => {
let num = Math.random();
if (num < .5) {
resolve(' es mayor que .5');
}else{
reject(' es menor o igual que .5');
};
});2. Creamos las funciones que introduciremos como argumentos al .then(), para que actúe en caso de resultado (resolve)
handleSuccess = (resolvedValue) => console.log(`Un buen resultado, has obtenido un número que ${resolvedValue}`);o resultado (reject)
handleFailure = (rejectionReason) => console.log(`Aún tienes mucho que practicar, ya que has obtenido un resultado que${rejectionReason}`);3. Ejecutamos el código en la consola:
(…)
Y ahora vamos a ver el ejemplo de una forma mucho más clara, basado en el anterior pero “maquillado” un poco por mí para que quede más claro, retrasando el resultado de salida de la Promesa (emulando una petición externa) y prestando atención al orden en el que se ejecuta el código:
El objeto promiseResult contiene las dos funciones a las que llamaremos para procesar la devolución de la promesa.
Como vemos, el código no se paraliza, y se ejecuta el último console.log a la espera de los 2000 segundos que determinan el lapso de tiempo para procesar los datos que se están generando y que serán devueltos de una u otra forma en función de estos.
¿Te he liado?
Te recomiendo navegar un poco por la red para informarte mejor acerca de cómo funcionan las promesas, ya que es imprescindible para trabajar con peticiones al servidor en el futuro. Independientemente del framework que vayas a utilizar.
Mañana terminaré la serie de las promesas con un breve artículo sobre otra forma de generarlas en JavaScript.
Keep Coding!
