Qué son las promesas

Clase 11 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

🤞🏼 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟬: 𝗤𝘂é 𝘀𝗼𝗻 𝗹𝗮𝘀 𝗽𝗿𝗼𝗺𝗲𝘀𝗮𝘀 𝟭𝟬/𝟮𝟭 🤞🏼 . 🪃 Un ++callback++ devuelve una función en los parámetros, cuando llamamos varias veces un callback, estaremos colocando muchas lineas de código y sería engorroso, por eso nacen las promesas, éstas optimizan y permiten leer mejor el código con pocas lineas. . 🫱🏼‍🫲🏾 Las ++promesas++ son asíncronas, por lo que el código continuará su ejecución normalmente y luego dirá si la promesa se resolvió o se rechazó. Por lo que varias promesas pueden llegar a entrar en ejecución al mismo tiempo. . Las promesas pueden suceder: .

Ahora
En el futuro
Nunca .

🛠️ ++Para crear una promesa:++ . Utilizamos la palabra reservada new seguida de la palabra Promise que es el constructor de la promesa. Este constructor recibe un único parámetro que es una función, la cuál a su vez, recibe otros dos parámetros: resolve y reject.

El parámetro ++resolve++ se utiliza para cuando la promesa devuelve el valor correctamente.
El parámetro ++reject++, se usa en el que caso de que no funcione. . 📝 ++Ejemplo:++

const promise = new Promise(function (resolve, reject){
resolve('hey!');
});

. 🗃️ Una Promesa puede estar en uno de los siguientes estados: .

Pendiente pending → Una promesa inicia en este estado: no cumplida, no rechazada:

Una promesa inicialmente está pendiente.

Cumplida fulfilled → Significa que la operación se completó satisfactoriamente, .then(va => …)

Cuando llamamos a resolve entonces la promesa pasa a estar resuelta.
Cuando una promesa se resuelve entonces se ejecuta la función que pasamos al método .then

Rechazada rejected → significa que la operación falló, .catch(err => …)

Si llamamos a reject pasa a estar rechazada (obtenemos un error que nos va a indicar la razón del rechazo).
Si la promesa es rechazada entonces se ejecuta la función que pasamos a .catch .

📝 ++Ejemplo con then y catch:++ .

Para probar el código, en el proyecto se crea la carpeta llamada ++promise++ dentro de la carpeta src.
Se crea el archivo ++index.js++ en la ruta: src/promise
El código del ejemplo queda así:

//ejemplo de contar vacas
const cows = 15; //valor inicial de vacas

const countCows = new Promise(function(resolve, reject){
//solo si el número de vacas supera 10, se llama al resolve
//de lo contrario: se llama a reject
if(cows > 10){
resolve(`We have ${cows} cows on the farm`);
} else {
reject("There is no cows on the farm");
}
});

//con solo .then se obtiene el resultado de la promesa de acuerdo a resolve o reject
//con .catch podemos obtener más información de un futuro error que se presente
//con .finally podemos imprimir un mensaje que indica que ya se ejecutó la promesa
countCows.then((result) => {
console.log(result);
}).catch((error) => {
console.log(error);
}).finally(() => console.log('Finally'));
//se usan arrow function () =>

Para ver el resultado por la consola de VSC, seleccionar el código y dar en Run Code, se puede ir probando cambiando la variable inicial cows .

🏹 Si hay dudas de las funciones ++arrow++ en el enlace hay ejemplos: aquí

Eduardo Pérez

student•

Tus aportes son muy buenos! Gracias por compartirlos.

Como veo que sufres con los saltos de linea como me pasaba a mi jaja te cuento como hacerlos, solo tienes que escribir   En lugar de los puntos. Por ejemplo, para lo anterior tuve. que escribir:

Tus aportes son muy buenos! Gracias por compartirlos.

&nbsp;
Como veo que sufres con los saltos de linea como me pasaba a mi jaja te cuento como hacerlos, solo tienes que escribir
&nbsp;
**\&nbsp;**
&nbsp;
En lugar de los puntos.

Espero te sirva!

Maria Gabriela Rodriguez Cuevas

student•

¡Muchas gracias por el dato!!!! :) ¡Ya no usaré los puntos como saltos de línea! 🥳🎉

Jose Tellez

student•

Imagina que creas una aplicacion web para mostrar el clima de cualquier ciudad del mundo a tus usuarios. Todo es genial. . Creas la interfaz grafica, le aplicas css, le haces animaciones y todo va quedando hermoso. . Ahora, creando la logica te encuentras con un problema: Los datos del clima no los tienes en tu pc, evidentemente. Esos datos los obtienes a través de una API y tardan un tiempo en llegar, aunque solo sean unas milesimas de segundo, tardan en llegar. . Tu tienes una funcion que pinta los datos en pantalla, pero para pintarlos necesita que hayan llegado. Como funciona javascript es que va ejecutand tareas de forma secuencial, una a la vez, cuando llegue a la funcion que pinta los datos, habrá un problema y es que no hay datos para pintar y luego el codigo se irá a ejecutar la siguiente tarea, dejando la funcion que pinta los datos en el pasado. . ¿Cómo resolver eso? . Ahí es donde entran las promesas. En lugar de pasarle la funcion que pinta los datos, los datos que va a pintar, le pasas una promesa. Es como si le dijeras: "Yo sé que necesitas esos datos, pero aun no los tengo. Te PROMETO que si esperas en la fila de al lado un poquito de tiempo, esos datos te llegan y cuando me desocupe de las tareas que vienen, te dejo pasar para que pinte los datos ¿Vale?" . Basicamente eso es lo que hace una promesa, representa un valor que no está disponible en el momento y hace que javascript espere a que esté disponible, pero mientras llegan esos datos, javascript puede ir haciendo otras tareas. . Al menos así, es como entiendo que funciona, si me equivoco en algo, haganmelo saber

Jonathan Barzola

student•

Wow buenisimo aporte!

Mario de la Torre

student•

Se entiende muy bien las promesas con este ejemplo. Gracias Jose!

Alvaro Eduardo Garzón Pira

student•

¡Hola!

Antes de este curso, vi el actual de ECMAScript 6 (En unas semanas saldrá uno actualizado), cuando el profesor habló de promesas en ese curso me sentí muy perdido en ese curso y me generó hasta un rechazo hacia las promesas, vi esta clase y por fin entendí las promesas, me siento poderoso:

Porfirio González López

student•

Ando en las mismas, estaba en el curso de ECMA (el nuevo)

Alejandro Castañeda Piña

student•

Tienes toda la razon. en el curso de ECMAScript me confundia con las promesas. ;(

Julian Jose Sossa Cruz

student•

Las promesas tienen 3 estados:

Pendiente
Cumplido
Rechazado

Paul Martin Vargas Portugal

student•

La primera vez que vi asincronismo no sabía que era el then, regresé a la bases de js y ahora tomando la versión actualizada y googleando un poco me he dado con la sorpresa que era como una manera de retorno.

Santiago Velez

student•

Me gustó mucho esta clase en particular. Cada vez se hace más sencillo entender.

Cristobal Nyram

student•

Totalmente de acuerdo contigo

Yohan Olmedo Bello Trejos

student•

Excelente, solo comentar que en no es "There is no cows on the farm" sino "There aren't.....", ya que es en plural

Diego Eduardo Téllez Contreras

student•

Oscar cometé muchos errores con el inglés, cosa que no es muy buena porque la gente que está aprendiendo pues va a comenzar a pronunciar las palabras como lo hace Oscar. Obviamente estas clases son de Javascript y no de inglés, pero una correcta pronunciación por parte de Oscar contribuiria a un mejor aprendizaje para todos.

DIEGO FERNANDO OSPINA RENDON

student•

Totalmente de acuerdo.

Max Andy Diaz Neyra

student•

Definicion:

Una promesa es un objeto que representa el resultado de una operación asíncrona.
Este resultado podría estar disponible ahora, en el futuro o nunca.
Las promesas se basan en callbacks pero añaden azúcar para un mejor manejo y sintaxis.
Las promesas son especiales en términos de asincronía ya que añaden un nuevo nivel de prioridad (micro task queue).
Una Promesa se encuentra en uno de los siguientes estados:
- pendiente (pending): estado inicial, no cumplida ni rechazada.
- cumplida (fulfilled): significa que la operación se completó satisfactoriamente.
- rechazada (rejected): significa que la operación falló.

Creación de promesa

Una promesa se crea instanciando un nuevo objeto utilizando el constructor Promise.
En el momento de la creación, en el constructor, debemos especificar un callback que contenga aquello que la promesa debe hacer.
Este callback nos provee de dos argumentos: resolveCallback y rejectCallback.
- El parámetro resolve se utiliza para cuando la promesa devuelve el valor correctamente.
- El parámetro reject, se usa en el que caso de que no funcione.
Ejemplo:

new Promise( /* ejecutor */ function(resolver, rechazar) { ... } );

Las promesas se ejecutan al ser creadas por lo que es conveniente crearle en una función y retornarlas.

Matias Ezequiel Rivero

student•

Aporte + código + comentario:

// promesas -> tienen 3 estados: - pendiente (cuando se esta ejecutando) - completada (cuando regreso la info deseada) - rechazada.
// para construir una promesa usamos la palabra reservada Promise, nos regresa una función anónima con 2 funciones dentro (resolve, reject).
const promise = new Promise(function (resolve, reject) { //estructura básica de una promesa. 
    resolve('todo bien');
});
// para el ej. con 10 vacas cumplimos con el suministro de leche necesario, con menos vacas dejamos de cumplirlo.
const cows = 15; // cantidad de vacas disponibles
const countCows = new Promise(function (resolve, reject) { // generamos una nueva promesa pasando la función anónima con resolve, reject.
    if (cows > 10) { // hacemos la comparación de la cantidad de vacas necesarias.
        resolve(`tenemos: ${cows} vacas necesarias para cumplir con la demanda de leche`); // resolvemos ok si se cumple la condición anterior.
    } else { // si no se cumple lo anterior caemos en el rechazo de la promesa.
        reject('no podemos cumplir con la demanda de litros de leche'); // resultado a devolver si no se cumple la condición (if)
    };
});
// podemos anidar tantos .then como queramos!! En este ejemplo la promesa se va cumplir por lo que va resolver en resolve.
countCows.then((result) => { // .then es un método donde pasamos una función anónima o función flecha, donde capturamos el resolve.
    console.log(result); // mostramos en consola el resultado del resolve.
}) .catch((error) => { // .catch es un método donde pasamos una función anónima o func. flecha, donde capturamos el error (reject) rechazo.
    console.log(error); // mostramos en consola el error/rechazo de la promesa.
}) .finally(() => console.log('finally')); // .finally es un método donde indicamos que finalizó, por más que se haya cumplido o rechazado.

Julián Fernando Salamanca Chacón

student•

Gracias...

Dario Paladines

student•

Ahora si se entiende mejor, el uso del .then y el .catch, si habido una mejora en la renovación del curso

Paul Martin Vargas Portugal

student•

const promise = new Promise(function(resolve, reject){
    resolve('hey!')
});

const cows =17;

const countCows = new Promise(function(resolve, reject){
    if (cows > 10){
        resolve(`We have ${cows} cows on the far,`)
    } else {
        reject('There is no cowa on the farm')
    }
})

countCows.then((result) =>{
    console.log(result);
}).catch((error)=> {
    console.log(error)
}).finally(()=> console.log ('Finally'));

Rubén Cuello

student•

Pregunta:

No termino de entender la diferencia entre esto:

Promesas

...y esto: 2) Sin promesas

¿Podría alguien ampliarme un poco el panorama y decirme que ventajas tiene trabajar con promesas?

Kevin Fiorentino

student•

Compañero! Las promesas son una forma de trabajar con asincronisidad en JS. En el ejemplo que compartes, no parece haber nada asíncrono, por lo tanto, el resultado del código es el mismo y no notarás la diferencia.

Kevin Salazar

student•

Es un ejemplo básico, pero imagina que haces una petición a una API, no sabes cuando se devolverá el resultado, por lo que es buena idea usas promesas ya que solo pasarán al callback stack cuando se cumpla la promesa, esta puede ser tanto resolved como rejected.

Stephany Plaza

student•

no se si me volví mas inteligente lo que si es que ahora todo se entiende mucho mas fácil, capaz sea como se explica de menos a mas, tremendo curso, me encanta!

Sebastian Giraldo

student•

Esto no les va ha cambiar el rendimiendo, pero si sera visualmente mas bonito

countCows
.then(result => { console.log(result) })
.catch(error => { console.log(error) })

Saul Martinez

student•

Amigos una pregunta se puede hacer un juego con Python y JavaScript? Me mandaron esa tarea de la uni pero creo que no se puede

Alan Cabrera

student•

Python y JavaScript están dedicados a tecnologías algo diferentes, aunque pueden converger en algunas. Entonces, respondiendo a tu pregunta depende de tu proyecto, si tu proyecto es una página web puedes usar js para frontend y python para backend, pero no se me ocurre algún otro caso en el que puedas usar ambos.

Ikal Esteban Fernández Galván

student•

mira en Python hay un youtber que hizo un juego, así que si, y JavaScript, solo hay que buscar páginas como friv https://www.youtube.com/watch?v=7tXsC8YlCq8

Gabriela Tinoco

student•

Algún caso de uso en la vida real para las promesas?

Nohely Badillo

student•

Un caso real de uso para las promesas puede ser cuando estas haciendo peticiones a un servidor, también puede ser cuando quieres consumir una API.

Este tipo de cosas normalmente se hace de manera asíncrona por el bien de la velocidad del navegador, puede que tomando los cursos de consumo de APIs con JS te haga más sentido las promesas. :D

Fran L

student•

Lo que logro entender de las promesas es que con ellas podemos dividir los bloques y ejecutar por separado y no entrar en una serie de código anidado que lo único que haría es confundirnos.

Osea, en el primer bloque tenemos la promesa que se genera, y pre-formatea una "resolución" y un "rechazo", validando si se cumple o no una determinada validación, y luego en un bloque aparte, que puede ser "ahora, más tarde o nunca", mandar a llamar al dato que habíamos validado.

Esto por lo visto ofrece muchas ventajas, puesto que no dependemos de llamar el dato inmediatamente,, sino que lo podemos guardar al momento que lo necesitemos.

Milton Estrada

student•

Las locuras de OPENAI 👽💻

Kevin Isaí Santiago López

student•

Buen ejemplo de uso para las IA's generadoras de texto.

Una pequeña revisión y listo

Milton Estrada

student•

Sí, uno le puede sacar mucho provecho

Justin Davila

student•

VS code tiene un shortcut para las promesas al escribir new:

Y la sintaxis de la función esta en forma de arrow function:

Pablo Cesar Acosta Paredes

student•

interesante

Jackon Alberto Florez Perez

student•

Por si no sabes que te va a decir la posible Crush JAJAJAJ

let respuesta = ['SI', 'NO'];
let desicionAleatoria = Math.floor(Math.random() * respuesta.length);
let desicion = respuesta[desicionAleatoria];
const sIoNo = new Promise(function (resolve, reject) {
  if (desicion === 'SI') {
    resolve('Se logro 🙌!')
  } else {
    reject('Nada causa 🙍')
  }
})

sIoNo.then(resolve => {
  console.log(resolve)
}).catch(error => {
  console.log(error)
})