No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Qu茅 son las promesas

11/26
Recursos

Aportes 77

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃馃徏 饾棖饾椆饾棶饾榾饾棽 #饾煭饾煬: 饾棨饾槀茅 饾榾饾椉饾椈 饾椆饾棶饾榾 饾椊饾椏饾椉饾椇饾棽饾榾饾棶饾榾 饾煭饾煬/饾煯饾煭 馃馃徏
.
馃獌 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:
.

  1. Pendiente pending 鈫 Una promesa inicia en este estado: no cumplida, no rechazada:
  • Una promesa inicialmente est谩 pendiente.
  1. 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
  1. 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铆

隆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:

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: 鈥淵o 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

Hola! Recomiendo este libro para aprender un poco m谩s sobre las promesa en JavaScript.
https://ebooks.humanwhocodes.com/promises

Las promesas tienen 3 estados:

  • Pendiente
  • Cumplido
  • Rechazado

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.

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

Excelente, solo comentar que en no es 鈥淭here is no cows on the farm鈥 sino 鈥淭here aren鈥檛鈥︹, ya que es en plural

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.

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.

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

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'));

Les dar茅 un consejo, la primera vez que vi este curso la verdad que no entend铆 nada, y era porque me faltaban bases y ahora lo puedo entender les recomiendo haber tomado:

  1. El curso de POO
  2. ECMAScript
    Y estos dos videos que la verdad me ayudaron much铆simo
    3.https://www.youtube.com/watch?v=Q3HtXuDEy5s&t=117s
    4.https://www.youtube.com/watch?v=lVqHiTCIRQg

Y recuerda nunca pares de aprender

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!

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) })

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 鈥渞esoluci贸n鈥 y un 鈥渞echazo鈥, validando si se cumple o no una determinada validaci贸n, y luego en un bloque aparte, que puede ser 鈥渁hora, 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.

Las locuras de OPENAI 馃懡馃捇

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

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

No entiendo por que tiene que habalar en espanglish, por favor se帽ores de Plazti, les pido que corrijan esto con este profesor, es bastante molestoso este tema que mezcle el espa帽ol con el ingl茅s. Estamos aprendiendo, no estamos desarrollando para ning煤n cliente, es verdaderamente molestoso esto, creo que es el 煤nico profesor que lo hace.

este video me ayudo a asentar mejor los conceptos: https://www.youtube.com/watch?v=TnhCX0KkPqs&ab_channel=ColorCode

Con el ejemplo de las vacas me ha quedado mas claro como es el manejo de promesas 鈥
ahora toca es practicar mucho !!

Las promesas en JavaScript son una forma de trabajar con c贸digo as铆ncrono que permite manejar de forma m谩s clara y legible la ejecuci贸n de tareas que pueden tardar en completarse, como solicitudes a servidores o procesamiento de datos grandes.

Las promesas se utilizan para representar un valor que puede estar disponible, ahora en el futuro, o nunca, y que puede ser resuelto o rechazado. Una vez que una promesa es creada, se pueden adjuntar funciones de then y catch que se ejecutaran en caso de que la promesa se resuelva o se rechace, respectivamente.

Las promesas tienen tres estados posibles:

  1. Pending: Cuando la promesa est谩 en proceso de resolverse o rechazarse.
  2. Resolved: Cuando la promesa se resuelve correctamente.
  3. Rejected: Cuando la promesa es rechazada, debido a un error.

Una promesa se crea con la funcion promise, que acepta una funcion llamada executor. El executor a su vez acepta dos par谩metros resolve y reject, que son funciones que deben ser llamadas en caso de que la promesa se resuelva o se rechace, respectivamente.

const cows = 15

const countCows = new Promise(function(resolve, reject){//Creamos una promesa llamada countCows
  if (cows > 10){//si cows es mayor que 10
    resolve(`We have ${cows} cows on the farm`)//Sale valida la operacion y me da un mensaje
  }else{//de caso contrario
    reject(`There is no cows on the farm`)//dime que no se a validado
  }
})

countCows.then((result)=>{//Entonces ejecutamos la promesa
  console.log('The promise it is resolved', result)//Si la promesa esta resuleta
}).catch((error)=>{// si no, capturame el error
  console.log('The promise it is reject',error)// dime el error
}).finally(()=>console.log('Finally'))//se finalizo la promesa

En este ejemplo, countCows es una promesa que se resuelve o se rechaza dependiendo de si la tarea as铆ncrona se completa satisfactoriamente o no. Luego, se adjuntan las funciones de then y catch para manejar los casos de 茅xito y error.

La funcion finally es un m茅todo disponible en las promesas de JS, que se ejecuta siempre al final de la cadena de promesas, sin importar si estas han sido resultas o rechazadas. La funcion finally no recibe ning煤n argumento y no modifica el valor de la promesa a la que se aplica, simplemente se encarga de ejecutar una tarea espec铆fica al final de la cadena de promesas.

隆Actualiza tu versi贸n de nodejs en un par de minutos!
https://blog.hubspot.com/website/update-node-js

Yo tambien agregue unos numeros aleatoreos para hacerlo mas divertido

const cows = Math.floor(Math.random() * 10) + 1;
const countCows  = new Promise(function (resolve, reject) {
    if (cows > 5) {
        resolve(`Great, We have ${cows} cows on the farm`);
    } else {
        reject(`There is not enough cows on the farm, we only have ${cows}`);
    }
});
countCows.then((result) => {
    console.log(result)
}).catch((error) => {
    console.log(error);
})

Mi propuesta de c贸digo es en esencia lo mismo pero usa arrow function y la invocaci贸n de funci贸n es m谩s sencilla.

const cows = 11;

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

countCows()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('Finally promise')); 

Realmente al leer los aportes aprendes mucho, gracias por esos aportes valiosos 鉂わ笍

Excelente esta clase.

Que felicidad cuando salio el logo de react

Para hacer m谩s corto nuestro c贸digo tambi茅n podemos hacerlo de esta manera, cuando en un console.log pondremos el mismo argumento de nuestra arrow function podemos dejar solo el console.log

La promesa es algo que va a pasar 驴Cu谩ndo?, puede ser AHORA, M脕S TARDE o NUNCA (en caso de que sea rechazada la solicitud).
.
La promesa tiene 3 estados:

  • Pendiente -> en caso de que se est茅 ejecutando
  • cumplido -> regresa la informaci贸n deseada o cuando ha sido rechazada
  • rechazado
PROMESAS Una Promesa (Promise) en JavaScript es un objeto que representa un valor que puede estar disponible ahora, en el futuro o nunca. Permite asociar manejadores con el eventual 茅xito o fallo de una operaci贸n as铆ncrona, similar a c贸mo los m茅todos s铆ncronos devuelven valores de inmediato, pero en lugar de devolver el valor final, la funci贸n as铆ncrona devuelve una promesa de proporcionar el valor m谩s adelante. Un Promesa puede estar en uno de tres estados: * pending (pendiente): estado inicial, ni cumplido ni rechazado. * fulfilled (cumplida): la operaci贸n se complet贸 con 茅xito. * rejected (rechazada): la operaci贸n fall贸.
Por si no sabes que te va a decir la posible Crush JAJAJAJ ```js 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) }) ```
```js // Creamos una nueva promesa que se resuelve inmediatamente con el valor 'hey!' const promise = new Promise(function (resolve, reject) { resolve('hey!'); }); // Definimos una variable que representa la cantidad de vacas en la granja const cows = 15; // Creamos una nueva promesa que verifica si hay m谩s de 10 vacas en la granja const countCows = new Promise(function (resolve, reject) { // Verificamos si hay m谩s de 10 vacas if (cows > 10) { // Si hay m谩s de 10 vacas, resolvemos la promesa con un mensaje que indica la cantidad de vacas resolve(`We have ${cows} cows on the farm`); } else { // Si no hay m谩s de 10 vacas, rechazamos la promesa con un mensaje de error reject("There is no cows on the farm"); } }); // Ejecutamos la promesa countCows y manejamos el resultado con then y catch countCows.then((result) => { // Si la promesa se resuelve, imprimimos el resultado console.log(result); }).catch((error) => { // Si la promesa es rechazada, imprimimos el error console.log(error); }).finally(() => // Independientemente de si la promesa se resuelve o se rechaza, se ejecuta este bloque console.log('Finally') ); ```

Hola, les comparto mis apuntes de esta lecci贸n!

Codigo de la clase 馃

const promise = new Promise(function (resolve, reject) {
  resolve("Holaaaaa");
});

const cows = 13;

const countCows = new Promise(function (resolve, reject) {
  if (cows > 10) {
    resolve(`We have ${cows} cows in the farm`);
  } else {
    reject("There aren't cows in the farm");
  }
});

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

Las聽promesas聽son un concepto para resolver el problema de asincron铆a de una forma mucho m谩s elegante y pr谩ctica que, por ejemplo, utilizando聽funciones callbacks聽directamente.

驴Qu茅 es una promesa?

Como su propio nombre indica, una聽promesa聽es algo que, en principio pensamos que se cumplir谩, pero en el futuro pueden ocurrir varias cosas:

  • La promesa聽se cumple聽(promesa resuelta)
  • La promesa聽no se cumple聽(promesa rechazada)
  • La promesa se queda en un聽estado incierto聽indefinidamente (promesa pendiente)

Con estas sencillas bases, podemos entender el funcionamiento de una promesa en Javascript. Pero antes de irse de lleno a eso, tambi茅n debemos tener claro que existen dos partes importantes de las promesas:聽como consumirlas聽(utilizar promesas) y聽como crearlas聽(preparar una funci贸n para que use promesas y se puedan consumir).

Promesas en Javascript

Las聽promesas聽en Javascript se representan a trav茅s de un聽, y cada聽promesa聽estar谩 en un estado concreto:聽pendiente,聽aceptada聽o聽rechazada. Adem谩s, cada聽promesa聽tiene los siguientes m茅todos, que podremos utilizar para utilizarla:

M茅todos Descripci贸n
.then(resolve) Ejecuta la funci贸n callback聽resolve聽cuando la promesa se cumple.
.catch(reject) Ejecuta la funci贸n callback聽reject聽cuando la promesa se rechaza.
.then(resolve,reject) M茅todo equivalente a las dos anteriores en el mismo聽.then().
.finally(end) Ejecuta la funci贸n callback聽end聽tanto si se cumple como si se rechaza.

Algo que tambi茅n se debe de tener en cuenta es que a diferencia del apartado anterior donde se utilizaban solamente funciones callback, en este enfoque se tiende a聽no anidar promesas, evitando as铆 el famoso聽Callback Hell, y haciendo el c贸digo mucho m谩s legible.

Las promesas (promise), son una sintaxis m谩s elegante y legible de realizar callbacks, creando as铆 un c贸digo mucho m谩s escalable y entendible para tod@s l@s coleg@s. Una promesa, en fin, no deja de lado los callbacks, con la diferencia de tener estados. Una promesa puede tener tres posibles estados:

鈴 Pending: Estado inicial, antes de que la promesa haya sido resulta o rechazada.
鉂 Rejected: Ha habido un error en la promesa y se ha rechazado.
鉁 Fulfilled: La promesa se ha completado con 茅xito.

Para utilizar una promesa, s贸lo debemos instanciarla de su clase haciendo uso de la palabra reservada new. Las mismas reciben dos argumentos; resolve y reject, que a su vez, son dos m茅todos y representan dos de sus estados.

Utilizamos el argumento resolve para retornar el valor deseado y el argumento reject, para retornar el valor no deseado, o sea, el fallo.

const promesa1 = New Promise( (resolve, reject) => 
{
		code;
	If(code === true){
		resolve(//correctValue);
			            	}
	else {
			reject(//wrongValue);
		}
	
});

Para poder obtener los valores que retorna una promesa, debemos utilizar su m茅todo .then. Este m茅todo recibe un callback, el cual tendr谩 como par谩metro, el valor retornado por el resolve o reject.

Siempre que usemos una promesa, adem谩s de usar su m茅todo .then para el resolve, debemos usar su m茅todo .catch para el reject. El m茅todo .catch captura v铆a argumento, el error ocurrido en caso que exista alguno. Evitando as铆, que dicho error rompa el programa y se propague por la red.

myPromise(//argumento)
	.then( data => console.log(data) )
	.catch( err => console.log(err) )
va muy r谩pido este profesor

mis conclusiones:

  • El mero hecho de usar promise ya la vuelve asincrona, por lo que afecta el flujo del programa.
  • Retorna otra promesa.
  • Necesita alguna validacion para indicar si hace resolve o reject
  • Usa claramente callback, aunque el parametro es una funcion anonima sin nombre y siempre indistintamente el nombre de su parametro el primero ser谩 llamado 鈥渞esolve鈥 y el segundo 鈥渞eject鈥.
  • El then y catch llama al 鈥渞esolve鈥 o 鈥渃atch鈥

Dejo aqu铆 un aporte con un poco m谩s de detalle y respuestas de algunas dudas que me surgieron a mi de las promesas:

Promesas 馃馃徏鈥嶐煫拆煆
Las promesas son funciones as铆ncronas, por lo que el c贸digo continuar谩 su ejecuci贸n normalmente y luego dir谩 si la promesa se resolvi贸 o se rechaz贸 (hubo un error).

Creando una promesa 馃洜锔
Para crear una promesa, es suficiente con declarar un nuevo objeto del tipo Promise de la siguiente manera:

new Promise(function(resolve, reject){
		//code
});


El nombre de estos argumentos no importan, por est谩ndar se suelen llamar resolve y reject, estas son funciones que por debajo cambiar el estado de la promesa de 鈥減endiente鈥 a 鈥渞esuelto鈥 y registra el valor que devuelve la promesa. Esto es parte fundamental del funcionamiento interno de las promesas y no se puede sobrescribir.

const COW_NUMBER = 9;
const countCows = new Promise(function(resolve, reject){
    const COW_LIMIT = 10;
    if(COW_NUMBER>COW_LIMIT){
        resolve(`We have ${COW_NUMBER} cows on the farm`)
    }else{
        reject('There is not enough cows on the farm')
    }
})

Usando las promesas 馃洜锔

En este ejemplo, hemos creado una funci贸n myPromise que al ejecutarse puedes utilizar .then() y .catch() para manejar los resultados de la promesa de la manera que desees seg煤n la promesa se resuelva o se rechace respectivamente.

myPromise.then((resultMsg => {
    console.log(resultMsg);
})).catch((errorMsg => {
    console.log(errorMsg);
})).finally(function(){
    //This can be ()=>{} also, this way we can see both ways to insert a function
    console.log('Finish!')
})

:0000000, llevaba mucho tiempo haciendo consultas a firestore en mi trabajo y no sab铆a que en realidad eran promesas :0

11/26 Curso de Asincronismo: Promesas en JavaScript

En JavaScript, las promesas son objetos que representan un valor que puede estar disponible en alg煤n momento en el futuro o que puede no estarlo. Las promesas se utilizan com煤nmente para manejar operaciones asincr贸nicas, como la carga de archivos, las solicitudes de red o cualquier tarea que tome tiempo y no se pueda completar de inmediato. Las promesas proporcionan una forma m谩s estructurada y controlada de manejar el flujo de datos asincr贸nicos en comparaci贸n con los callbacks anidados.

Una promesa puede estar en uno de los siguientes tres estados:

  1. Pendiente (Pending): El estado inicial de una promesa. Significa que la operaci贸n a煤n no se ha completado ni ha fallado.

  2. Cumplida (Fulfilled): Significa que la operaci贸n se complet贸 exitosamente, y la promesa tiene un valor resultante disponible.

  3. Rechazada (Rejected): Significa que la operaci贸n fall贸, y la promesa tiene un motivo o una raz贸n para el fallo.


Las promesas en JavaScript se crean utilizando el constructor Promise, que toma una funci贸n ejecutora con dos par谩metros: resolve (para completar la promesa) y reject (para rechazarla). Aqu铆 hay un ejemplo b谩sico de c贸mo se crea y utiliza una promesa:

const miPromesa = new Promise((resolve, reject) => {
  // Simulamos una operaci贸n asincr贸nica
  setTimeout(() => {
    const exito = true; // Puedes cambiarlo a false para simular un fallo
    if (exito) {
      resolve('Operaci贸n completada exitosamente');
    } else {
      reject('La operaci贸n ha fallado');
    }
  }, 2000); // Simulamos un retraso de 2 segundos
});

miPromesa
  .then(resultado => {
    console.log(resultado); // Se ejecuta si la promesa se cumple
  })
  .catch(error => {
    console.error(error); // Se ejecuta si la promesa se rechaza
  });


En este ejemplo, la promesa miPromesa se resuelve despu茅s de un retraso simulado de 2 segundos y se muestra un mensaje de 茅xito en la funci贸n then. Si la promesa se rechaza (cambiando exito a false), se muestra un mensaje de error en la funci贸n catch.

Las promesas son una parte fundamental de la programaci贸n asincr贸nica en JavaScript y se utilizan ampliamente en aplicaciones web modernas para gestionar tareas as铆ncronas de manera m谩s legible y manejable.

Espero sea de utilidad. 馃懆鈥嶐煉

AAAAAA por fin entendi promesas xd

**11/26 Qu茅 son las promesas **
Imagina que tienes un amigo que te hace una promesa de que te va a dar un regalo ma帽ana, pero no sabes cuando exactamente llegar谩. Sin embargo, conf铆as en su palabra y sabes que eventualmente cumplir谩 su promesa.

Una promesa es un objeto que representa el resultado futuro de una operaci贸n as铆ncrona. Imagina que tienes una funci贸n que realiza una tarea que lleva tiempo en completarse, como descargar una imagen de internet.

En lugar de esperar que se descargue la imagen, puedes utilziar una promesa para decirle al programa que se ejecutar谩 la operaci贸n y cuando est茅 lista, la promesa se cumplir谩 y te dara acceso al resultado ( imagen )

const promesa = new Promise((resolve, reject) => {
  // Realiza alguna operaci贸n as铆ncrona aqu铆, como descargar una imagen

  // Si la operaci贸n es exitosa, llamamos a resolve y pasamos el resultado
  resolve(resultado);

  // Si ocurre un error, llamamos a reject y pasamos el motivo del error
  reject(error);
});

// Usamos la promesa
promesa
  .then(resultado => {
    // Hacemos algo con el resultado
  })
  .catch(error => {
    // Manejamos el error
  });

Creamos una promesa utilizando el constructor Promise, pasando una funci贸n con dos par谩metros: resolve y reject. Dentro de esta funci贸n, realizamos la operaci贸n as铆ncrona deseada, y si tiene exito llamamos a resolve con el resultado. Si ocurre un error, llamamos a reject con el motivo del error

Luego utilizamos los m茅todos then y catch para manejar el resultado de la promesa. El m茅todo then se ejecutar谩 si la promesa se cumple (resolve) y podemos hacer algo con el resultado. El m茅todo catch se ejecutar谩 si la promesa es rechazada (reject) y podemos manejar el error.

un codigo mas reducido utilizado if ternario

const cows = 1;

const promise = new Promise((reject,resolve)=>{
    (cows===15)
    ?setTimeout(()=>{resolve(`la cantidad ${cows} es la correcta`)},2000):setTimeout(()=>{reject(`la cantidad ${cows} no es la correcta`)},2000);
});

promise.then((response)=>{console.log(response);}).catch((err)=>{console.log(err);}).finally(()=>{console.log('final');});

Si solo vas a retornar un valor dentro del resolve o el reject, puedes usar esta forma simplificada de then y catch.

countCow.then(console.log).catch(console.log)

Las promesas en JavaScript representan procesos que ya est谩n sucediendo, que se pueden encadenar con funciones de devoluci贸n de llamada

Finally fue agregado en ES9 (Junio 2018) y es un m茅todo del prototipo Promise que se va a ejecutar si o s铆 independientemente si la promesa fue aceptada o rechazada.

const cows = 5;

const countCows = new Promise(function (resolve, reject) {
    if (cows > 10) { //si cumple esta validaci贸n, se llama a resolve
        resolve(`We have ${cows} cows on the farm`);
    } else { //de lo contrario a reject
        reject("There is no cows on the farm");
    }
});

countCows.then((result) => { //para imprimir el resultado, se usa then en caso se haya ejecutado resolve, el cual recibe una funci贸n con un par谩metro con cualquier nombre que haga referencia a un resultado
    console.log(result);
}).catch((error) => { //catch en caso se haya ejecutado reject y al igual que then recibe una funci贸n como par谩metro
    console.log(error);
}).finally(() => console.log('Finally')); //finally es otro m茅todo que se ejecuta si o s铆 al terminar el proceso de una promeesa, sea est谩 satisfactoria o rechazada.

Tambi茅n se podr铆a manejar de esta manera

console.log('inicio')

const cows = 15

const contCows = new Promise((resolve, reject)=>{
    if(cows > 10){
        resolve(`we have ${cows} cows on the farm`);
    }
    else{
        reject('there us no cows on the farm')
    }
}).then((result)=>console.log(result))
.catch((err)=>console.log(err))
.finally(()=>console.log('finally'))

console.log('fin')

Tal vez no fue tan buena idea ense帽ar asincronismo pidiendo directamente informaci贸n a un API.

SIguiendo en orden la escuela de javascript est谩 primero asincronismo que consumo de API, as铆 que he estado muy perdido.

Dejo un ejemplo que explica mejor el concepto de promesas:
EJ.
Un ni帽o le pide prestado a otro un juguete, el ni帽o le dice que si pero mas tarde, lo cual genera una promesa.

El ni帽o puede cumplir la promesa "suscessfully"
El ni帽o puede no cumplir la promesa "rejected"
El ni帽o puede nunca cumplir la promesa 鈥減ending鈥

Se utilizaron arrow function que es mas facil de entender (funciones que no pueden ser llamadas por su nombre). 馃憣

const juguetes = true;
const prestar = new Promise((siPresta, noPresta) =>{
   if(juguetes){
    siPresta(console.log('Si me los presto'))
   } else {
    noPresta(console.log('No me los presto'))
   }
});

prestar.then((resultado)=> resultado)
        .catch((error)=>error)
        .finally(()=> console.log("el ni帽o tomo la desicion de prestar o no el juguete"));

.then => Obtiene el resultado de la promesa de acuerdo a resolve.

.catch => Obtiene la informacion de reject de acuerdo a la logica de nuestro codigo

La verda la primera vez que aborde este tema de las promesas no entendia nada, en este curso logre entender mucho mejor. Gracias

Me pareci贸 mucho mejor explicado con este ejemplo sencillol, porque antes no commprendia la sintaxis y el significado del then y el catch en promesas 馃槃

Mi mente leyendo We have ${cows} cows 鈥渙n鈥 the farm. JAJAJAJAJAJA

Estaba totalmente perdido con las clases en EcmaScript, en esta clase el profe mejoro much铆simo, y aprend铆 sobre catch, arrow functions, rhen, promesas.
Adjunto mi C贸digo.

//Ejemplo de promesa con vaquitas.
const cows = 9;

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

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



// el mayor igual sirve para no mandar a llamar una funcion, sino que es como si hicieras una funcion solo con ese simbolo. se denominan arrow functions
//${} sirve para imprimir el valor numerico en una cadena de strings.
//.then(result) muestra el resolve y .catch muestra el reject
// En promesas tambi茅n existe el finally, que nos muestra cuando ya termino la ejecuci贸n de una promesa.

Excelente explicacion

Las promesas y su encadenamiento y como ayudan a evitar el Callback Hell

/* algo que puede ocurrir ahora, ma帽ana o nunca */
const promise = new Promise(function(resolve, reject){
  resolve('Hey!');
})

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

countCows.then((result)=> {
  console.log(result);
}).catch((error) => {
  console.log(error);
}).finally(()=> {
  console.log("holy shit");
})
```

隆Vamos si se puede!!

Tengo ya un tiempo luchando para poder trabajar con promesas de forma m谩s natural, pero a煤n me cuesta. Me parece incre铆ble lo f谩cil que lo hace ver Oscar en una clase, mientras tanto seguimos practicando.

Promesas: Representa un valor que puede estar disponible ahora, en el futuro o nunca.

les comparto mi ejemplo 馃憤

 const spaceGb = 12;
 const file =10;
 const result =spaceGb-file;
 const countSpaceGb = new Promise((resolve, reject)=>{
    if(spaceGb >= file ) resolve(`El archivo se guard贸 satisfactoriamente, quedan ${result}GB disponibles`);
    else reject(`no contamos con el espacio suficiente para almacenar su archivo`);
 })
 countSpaceGb
 .then(resultado=>console.log(resultado))
 .catch(error =>console.log(error))
 .finally(()=>console.log(`Gracias, la operaci贸n ha finalizado.`));

Las promesas me parecen geniales. La verdad busque bastante sobre ellas y uff 馃槃

En ocasiones creo que no me funciona muy bien la extension de VS Code, o quizas podria ser porque lo uso desde Windows, pero a veces tengo errores desde VS Code, pero cuando me voy al la consola del navegador, todo funciona bien.

const cows = 11;

const countCows = new Promise(function(resolve, reject) {
    if(cows > 10){
        resolve(`There is ${cows} cows`);
    } else {
        reject('There isnt enough cows');
    }
});



countCows
.then((result) => {console.log(result)})
.catch( (error) => {console.log(error)})
.finally(()=>console.log('Finally'));
//una promesa tiene 3 estados, pendiente, cumplido o rechazado
const promise = new Promise(function(resolve, reject){
    resolve('hey!')
});
//estructura b谩sica de una promesa
const cows = 15;
const countCows = new Promise(function(resolve, reject) {
    if (cows > 10) { //condici贸n para que la promesa sea resuelta
        resolve(`We have ${cows} cows on the farm`); //que pasa si la promesa se resuelve
    } else {
        reject ("There is no cows on the farm"); //que pasa si la promesa se rechaza
    }
});

countCows.then((result) => {
    console.log(result);
}).catch((error) => { //.catch indica que pasa si la promesa es reject
    console.log(error);
}).finally(() => console.log('Finally')); //.finally indica que pasa al final de la promesa independientemente rel resultado

pense que llamariamos la fakeApi usando el concepto de promesa, creo que es en la siguiente clase

Este post podr铆a ayudar a entender mejor las promesas: qu茅 son y c贸mo funcionan las promesas en JavaScript

Code:

const cow = 9;
const countCows = new Promise((resolve, reject) => {
    if (cow > 10) {
        resolve(`We have ${ cow } cows in the farm.`);
    } else {
        reject("There isn't cows in the farm");
    }
});

countCows
    .then(value => console.log(value))
    .catch(error => console.log(error))
    .finally(() => console.log('Finally'));

Un Promise est谩 en uno de estos estados:

pending (pendiente): estado inicial, ni cumplido ni rechazado.
fulfilled (cumplida): lo que significa que la operaci贸n se complet贸 con 茅xito.
rejected (rechazada): lo que significa que la operaci贸n fall贸.

const cows = 15;
// const  cows = 9;

// nuestra promesa
const countCows = new Promise((resolve, reject) => {
    if(cows > 10){
        resolve(`We have ${cows} cows on the Farm`);
    } else{
        reject(`The is no cows on the Farm`);
    }
});

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

Este es mi aporte para los que a煤n tienen problemas con arrow function

const vacas = 15;

//Puedes omitir 'resolver' o 'reject' por cualquier palabra, pero no ser铆a tan
// claro para otros desarrolladores
const contarVacas = new Promise(function (resuelto, denegado) {
    if (vacas > 10) {
        resuelto(`Tenemos las ${vacas}vacas necesarias`)
    } else{
        denegado(`No contamos con las ${vacas} vacas necesarias`)
    }
});

/* En la Arrow Function de cath en  el argumento de "error" 
omito los parentesis pues solo es un argumento, si fueran dos 
es forsozo el parentesis,  y en el console.log(); omito corchetes{}
pues solo es una linea de codigo si fueran dos o m谩s se necesitan los{} */

contarVacas.then(function(result) {
    return console.log(result);

}).catch( error => console.log(error)).finally(function() {
        return console.log('Finalizado');
});

  1. tienes el bloque inicial donde consultas tu promesa
  2. then para leer el valor luego de que te responda
  3. catch, para validar el caso de que se obtenga algun error
  4. finnaly, el bloque final que se ejecuta siempre