Qué son las promesas

🤞🏼 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟬: 𝗤𝘂é 𝘀𝗼𝗻 𝗹𝗮𝘀 𝗽𝗿𝗼𝗺𝗲𝘀𝗮𝘀 𝟭𝟬/𝟮𝟭 🤞🏼
.
🪃 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: “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

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 “There is no cows on the farm” sino “There aren’t…”, ya que es en plural

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.

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.

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

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 “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.

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:

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. 👨‍💻

Este post podría ayudar a entender mejor las promesas: qué son y cómo funcionan las promesas en JavaScript

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

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:

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

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 “resolve” y el segundo “reject”.
• El then y catch llama al “resolve” o “catch”

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 “pendiente” a “resuelto” 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

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 “pending”

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

Mis apuntes en Notion💚

.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 “on” 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.

Asíncronismo en JS - Notion

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

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