No tienes acceso a esta clase

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

ES6: promesas

11/35
Recursos

Una promesa es una forma de manejar el asincronismo en JavaScript y se representa como un objeto que puede generar un valor 煤nico a futuro, que tiene dos estados, o est谩 resuelta o incluye una raz贸n por la cual no ha sido resuelta la solicitud.

C贸mo utilizar las promesas

Solamente ten presente que la clase Promise y sus m茅todos then y catch fueron a帽adidos en ES6. Esto resuelve un problema del manejo del asincronismo con callbacks, llamado Callback Hell.

El argumento de la clase Promise es una funci贸n que recibe dos par谩metros:

  • resolve: cuando la promesa es resuelta.
  • reject: cuando la promesa es rechazada.

Puedes utilizar cualquier nombre, siempre y cuando sepas su funcionamiento.

const promesa = () => {
  return new Promise((resolve, reject) => {
    if (something) {
      //true o false
      resolve("Se ha resuelto la promesa")
    } else {
      reject("Se ha rechazado la promesa")
    }
  })
}

promesa()
  .then(respuesta => console.log(respuesta)) //En caso que se ejecute resolve
  .catch(error => console.log(error)) //En caso que se ejecute reject

Cursos para entender el asincronismo en JavaScript

Si a煤n no sabes en qu茅 consiste el asincronismo, no te preocupes, existen cursos completos de este tema.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 92

Preguntas 10

Ordenar por:

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

o inicia sesi贸n.

Ven铆a todo muy bien en el curso pero en este video ya regres贸 el gndx de cursos pasados que le empieza a inventar nombres a todo sin aportar nada al contexto de la explicaci贸n.

**.then() ** es un m茅todo de la promesa que retorna anotherFunction(), no es 鈥渁lgo llamado then鈥 y si bien es una 鈥榩alabra reservada鈥, decir que es una 鈥榩alabra reservada鈥 no aporta nada, es un m茅todo, y por ser un m茅todo se 鈥渓lama鈥 o 鈥渆jecuta鈥 y recibe par谩metros, en este caso un callback鈥 no es tan d铆ficil llamar a las cosas por su nombre.

Este video me ayud贸 a entender m谩s claramente las promesas.

Sigo la ruta de desarrollo web, y esta clase me parecio confusa ya que no se da contexto suficiente de lo que son las promesas y como funcionan, a lo mejor este curso de ECMAScript 6+ deberia ir mas adelante en la ruta, o por lo menos intentar aclarar todos los fundamentos de las promesas, por que la verdad para entender la clase siento que tengo que buscar documentaci贸n externa, y pues asi cual es el chiste

Cabe destacar que uno de los principales problemas que vinieron a solucionar las promesas fue el CallbackHell

CallbackHell, descripci贸n gr谩fica:

Y aqu铆 un recurso para ahondar en el tema: https://www.geeksforgeeks.org/what-to-understand-callback-and-callback-hell-in-javascript/

Creo que acabo de entrar al mid level de JS xd tengo miedo

Les dejo un video que me ayudo a entender un poco mejor este tema de las promesas
Curso JavaScript: 47. Promesas - #jonmircha

Hola Chicos! 馃槂
ES6

  • Promesas
const anotherFuncion = () => {
    return new Promise((resolve, reject) => {
        if (false) {
            resolve("hey!!");
        } else {
            reject ( "whooooops!");
        }
    })
}

anotherFuncion()
.then(response => console.log(response))
.catch(err => console.log(err));

Hay que revisar esta clase. Las promesas hay que entenderlas bien, aqui no hay una buena explicacion.

No me gusto esta clase, realmente no entend铆.

Gracias a los distintos aportes de mis compa帽eros de otras paginas o plataformas distintas eh podido tener un concepto mas claro.

Promises, un antes y despues en JavaScript 馃挍

esta usando una funcion callback, callback es una funcion que usa a otra funcion como argumento.
En cuanto a los metodos then y catch, estos son metodos que pertenecen al objeto promise.
Estos metodos son usados para en la promise (anotherFunction), para mostrar el estado de esta promesa, que puede tener 2 estados, aceptada, que la retorna el METODO THEN y RECHAZADA que la retorna el METODO CATCH

Como no entendia de que estabamos hablando le pregunte mis dudas a chatGPT y entendi todo 馃槅

PD.: mi novio esta aca comprobando que chatGPT no me mienta

Le agregue un randomBoolean para interactuar mejor 馃槀, aqu铆 lo pueden probar.

const helloPromise = () => {
  return new Promise( (resolve, reject) => {

    let randomBoolean = Math.random() > .5;

    if(randomBoolean) resolve('Hello!');
    else reject('Whoops!');

  });
}

helloPromise()
  .then(response => console.log(response))
  .catch(error => console.log(error));

Querido platzi y querido profesor鈥 La clase no fue clara, sinceramente no se explico bien. Siento que para entenderla hay que ya conocer que son las promesas de antemano o se deber铆a explicar mejor. Gracias

Incluso cuando tu ejecutas funciones en un orden especifico, si contienen promesas, javascript las ejecuta en un orden diferente:

const myPromise = () => new Promise((resolve, reject) => {
  if (false) {
    resolve('Hey! 馃榿');
  } else {
    reject('Whooops! 馃槥');
  }
})


console.log('First console')
myPromise()
	.then((response) => console.log(response))
	.catch((error) => console.error(error))
console.log('Second console')

Esto devolver谩 en la consola

-> First console
-> Second console
-> Hey! 馃榿

Esto debido al event loop de javascript.
Es algo a tener en cuenta cuando se quiere obtener informaci贸n cuando se ejecuta una promesa, pero tal vez el valor todav铆a no esta disponible 馃鈥

Punto a favor para omitir los semicolons 馃槅

Les voy a dar un ejemplo algo complicado de entender, pero si lo entienden los felicito de verdad:

function verSiHayTorillas(tortilla) {
    if (tortilla === 0 || typeof tortilla !== "number" || tortilla > 10) return "no hay tortillas"
    else return tortilla
}

let dinero = 100

function irPorTortillas(tortillas) {
    let tortillasRevisadas = verSiHayTorillas(tortillas)
    dinero = dinero - tortillasRevisadas
    if(dinero <= 0) return Promise.reject(`Tienes ${dinero} de plata, no te alcanza para comprar tortillas`)
    if(tortillasRevisadas !== tortillas) return Promise.reject(tortillasRevisadas)

    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(tortillasRevisadas)
        }, 0| Math.random()*1000);
    })
}

irPorTortillas(5)
    .then((tortilla) => {
        console.log(`Compraste Q${tortilla} de tortilla`)
        return irPorTortillas(4)
    })
    .then((tortilla) => {
        console.log(`Compraste Q${tortilla} de tortilla`)
        return irPorTortillas(1)
    })
    .then((tortilla) => {
        console.log(`Compraste Q${tortilla} de tortilla`)
        return irPorTortillas(2)
    })
    .then((tortilla) => console.log(`Compraste Q${tortilla} de tortilla`))
    .catch((err) => console.error(err))

CODIGO CON SWITCH

function promesa (){
    return new Promise((resolve, rejec) =>{
        switch(resolve){
            case resolve:
                console.log('Qu茅 pasa capo, crack, genio!');
            break;
            case rejec:
                console.log('No se pudo!');
            break;
            default:
            }
    })
}
promesa()
.then(response => console.log(response))
.catch(rejec => console.log(rejec))

Las promesas explicadas a detalle en c贸digo
.

En vez de hacer esto:

myPromise()
	.then((response) => console.log(response))
	.catch((error) => console.error(error))

Se puede hacer esto, si el campo que se va a pasar la funci贸n es el mismo:

myPromise()
	.then(console.log)
	.catch(console.error)

ES6: promesas

En ECMAScript 6, se introdujeron las promesas como una mejora en la forma en que se manejan las operaciones as铆ncronas en JavaScript. Las promesas son una manera m谩s elegante y flexible de trabajar con c贸digo as铆ncrono en comparaci贸n con los callbacks anidados.

Una promesa en JavaScript es un objeto que representa la finalizaci贸n o el fracaso eventual de una operaci贸n as铆ncrona. Una promesa puede tener tres estados:

  1. Pendiente (Pending): Cuando se crea una promesa, comienza en este estado. Esto significa que la operaci贸n as铆ncrona a煤n no ha terminado.

  2. Cumplida (Fulfilled): Una promesa entra en este estado cuando la operaci贸n as铆ncrona se completa con 茅xito. En este punto, se proporciona un valor resultante.

  3. Rechazada (Rejected): Una promesa entra en este estado si la operaci贸n as铆ncrona falla. Se proporciona una raz贸n del fracaso.


Aqu铆 hay un ejemplo b谩sico de c贸mo crear y usar una promesa en ES6:

// Crear una promesa
const myPromise = new Promise((resolve, reject) => {
  // Simular una operaci贸n as铆ncrona exitosa
  setTimeout(() => {
    const randomValue = Math.random();
    if (randomValue > 0.5) {
      resolve(randomValue);  // Resuelve la promesa con un valor exitoso
    } else {
      reject('El valor es demasiado bajo');  // Rechaza la promesa con una raz贸n
    }
  }, 1000);
});

// Usar la promesa
myPromise.then(result => {
  console.log('Promesa cumplida:', result);
}).catch(error => {
  console.error('Promesa rechazada:', error);
});


En este ejemplo, myPromise simula una operaci贸n as铆ncrona que se resuelve o se rechaza seg煤n un valor aleatorio. Luego, usamos los m茅todos .then() y .catch() para manejar respectivamente el caso de cumplimiento y rechazo de la promesa.

Las promesas proporcionan una manera m谩s legible y manejable de trabajar con c贸digo as铆ncrono en comparaci贸n con los callbacks anidados.

Adem谩s, han allanado el camino para caracter铆sticas a煤n m谩s poderosas, como el uso de async/await, que permite escribir c贸digo as铆ncrono de manera a煤n m谩s sincr贸nica y f谩cil de entender.



Los m茅todos .then() y .catch()


Repasemos los m茅todos .then() y .catch() en el contexto de las promesas en JavaScript implementados en ES6.

  1. .then(): El m茅todo .then() se utiliza para manejar el caso en el que una promesa se cumple (es decir, pasa al estado 鈥淔ulfilled鈥). Toma una funci贸n como argumento que se ejecutar谩 una vez que la promesa se haya cumplido. Esta funci贸n toma como par谩metro el valor con el que se resolvi贸 la promesa.

    Ejemplo:

    myPromise.then(result => {
      console.log('Promesa cumplida:', result);
    });
    


En este caso, cuando myPromise se cumpla, la funci贸n dentro de .then() se ejecutar谩, y el valor con el que se resolvi贸 la promesa se pasar谩 como argumento a esa funci贸n.

  1. .catch(): El m茅todo .catch() se utiliza para manejar el caso en el que una promesa es rechazada (es decir, pasa al estado 鈥淩ejected鈥). Al igual que .then(), toma una funci贸n como argumento que se ejecutar谩 cuando la promesa sea rechazada. Esta funci贸n tambi茅n toma como par谩metro la raz贸n del rechazo.

    Ejemplo:

    myPromise.catch(error => {
      console.error('Promesa rechazada:', error);
    });
    


En este ejemplo, si myPromise es rechazada, la funci贸n dentro de .catch() se ejecutar谩 y recibir谩 la raz贸n del rechazo como argumento.

Es importante destacar que .then() y .catch() devuelven nuevas promesas, lo que permite encadenar m煤ltiples operaciones as铆ncronas de manera m谩s legible. Por ejemplo:

myPromise
  .then(result => {
    console.log('Promesa cumplida:', result);
    return result * 2;  // Retorna un nuevo valor para ser utilizado en el siguiente .then()
  })
  .then(newResult => {
    console.log('Nuevo resultado:', newResult);
  })
  .catch(error => {
    console.error('Promesa rechazada:', error);
  });


En este ejemplo, el segundo .then() se ejecutar谩 despu茅s del primero y recibir谩 el valor multiplicado por 2 que se devolvi贸 en el primer .then().

La combinaci贸n de .then() y .catch() permite manejar tanto los casos de 茅xito como los casos de error en las promesas, lo que hace que el c贸digo as铆ncrono sea m谩s manejable y comprensible.



Sigamos con el aprendizaje. 馃懆鈥嶐煉

C贸digo: Es una funci贸n que recibe como par谩metro otra funci贸n y la ejecuta seg煤n sea el caso

  • Es un objeto que representa una operaci贸n asincr贸nica (como traer una imagen a una p谩gina web, la p谩gina carga mientras la operaci贸n asincr贸nica se resuelve) y puede estar en 3 estados
  1. Pendiente - pending
  2. Resuelta - fulfilled/resolve
  3. rechazada - rejected
  • Son para manejar errores de operaciones asincr贸nicas

ejemplo mas real de las promesas:

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('Datos recibidos:', response.data);
  })
  .catch(error => {
    console.error('Error al cargar datos:', error);
  });

El asincronismo ha formado parte de la cultura mexa, al emplearla con la frase 鈥渁horita鈥, es una acci贸n que puede pasar hoy, ma帽ana o nunca.

Promesa en JavaScript. Veamos c贸mo funciona paso a paso:

  1. Se define una funci贸n llamada anotherFunction utilizando la sintaxis de una funci贸n flecha (=>).

  2. Dentro de anotherFunction, se crea una nueva promesa utilizando la clase Promise. La promesa recibe una funci贸n con dos par谩metros, resolve y reject, que son funciones de control utilizadas para indicar si la promesa se resuelve correctamente o se rechaza.

  3. Dentro de la funci贸n de la promesa, se coloca una condici贸n (if) que se eval煤a como true. Si la condici贸n es verdadera, se llama a resolve con el argumento 'Hey!', lo que indica que la promesa se resuelve correctamente.

  4. Si la condici贸n es falsa, se llama a reject con el argumento "Whoops!", lo que indica que la promesa se rechaza.

  5. Se llama a la funci贸n anotherFunction sin pasarle ning煤n argumento, lo que devuelve una promesa.

  6. Se encadena el m茅todo then a la promesa devuelta. El m茅todo then recibe una funci贸n de callback que se ejecutar谩 si la promesa se resuelve correctamente. En este caso, la funci贸n de callback toma el argumento response y lo muestra en la consola utilizando console.log.

  7. Se encadena el m茅todo catch a la promesa. El m茅todo catch recibe una funci贸n de callback que se ejecutar谩 si la promesa se rechaza. En este caso, la funci贸n de callback toma el argumento err y lo muestra en la consola utilizando console.log.

En resumen, el c贸digo crea una promesa en anotherFunction y la resuelve con 'Hey!' si una condici贸n es verdadera, o la rechaza con "Whoops!" si la condici贸n es falsa. Luego, se utiliza el m茅todo then para mostrar el valor resuelto en la consola y el m茅todo catch para mostrar cualquier error en la consola. En este caso, dado que la condici贸n es verdadera, el resultado final impreso en la consola ser铆a 'Hey!'.

me sentia feliz por mi avanze, pero llegando a esta clase, me estoy desanimando, no le entiendo mucho

Esto de tirar teoria PORQUE SI鈥 sin aplicarlo a algo practico no sirve para nada. Quien se va a acordar este choclo de cosas sin sentido y con poca explicacion sin siquiera saber su practicidad? 1 estrella

https://platzi.com/clases/1759-fundamentos-node/25189-callbacks/
les recomiendo ver ese curso de fundamentos de node.js para entender mejor como funciona y que utilidad tienen las promesas.
tambi茅n les recomiendo ver el video 3 que habla de como funciona el event loop. para esclarecer mas los porque son importantes las promesas en javascript asincronico.
por otro lado, lei los comentarios y es cierto que oscar patino un poco. nos explico medio asi nomas. pero esque esta clase no es para profundizar. es para introducir un tema. lo que si fallo es en no aclara eso. deberia haber avisado 鈥渕uchachos este tema es importante y complejo, aca los vamos a ver por arriba y mas adelante en la ruta vamos a profundizar鈥 y tambien es cierto que patino con alguno terminos. en eso deberia ser mas claro por ejemplo : "then es un metodo de las promesas y se pueden encadenar varios"
pero bueno, mi recomendacion es esa. miren esos video mientras toman un cafecito y muchas cosas de aca van a quedar mucho mas claras. saludos!

S铆, 隆claro que s铆! Las promesas son una caracter铆stica introducida en ES6 (ECMAScript 2015) que permite trabajar con operaciones as铆ncronas de una manera m谩s f谩cil y estructurada. En esencia, una promesa es un objeto que representa el resultado pendiente de una operaci贸n as铆ncrona.

En t茅rminos simples, una promesa puede estar en uno de tres estados:

Pendiente: La promesa est谩 en espera de que se resuelva o se rechace.
Resuelta: La promesa se ha resuelto satisfactoriamente y devuelve un valor.
Rechazada: La promesa ha sido rechazada y devuelve una raz贸n del porqu茅 ha sido rechazada.
Para trabajar con promesas, se utiliza el objeto Promise. Este objeto tiene un constructor que acepta una funci贸n como argumento que a su vez tiene dos par谩metros, resolve y reject. Estas dos funciones se utilizan para indicar si la promesa ha sido resuelta o rechazada, respectivamente.

Un ejemplo de c贸mo utilizar promesas para manejar una operaci贸n as铆ncrona es el siguiente:

const promesa = new Promise((resolve, reject) => {
  // Hacer una operaci贸n as铆ncrona aqu铆, como una petici贸n AJAX

  if (operacionExitosa) {
    resolve(resultado); // Si la operaci贸n es exitosa, resolver la promesa con un valor
  } else {
    reject(razon); // Si la operaci贸n falla, rechazar la promesa con una raz贸n
  }
});

promesa.then(resultado => {
  // El resultado de la promesa se maneja aqu铆 si se resuelve exitosamente
}).catch(razon => {
  // El motivo del rechazo de la promesa se maneja aqu铆 si la promesa es rechazada
});

En el ejemplo anterior, promesa es una instancia de un objeto Promise. Se crea una promesa que representa una operaci贸n as铆ncrona, y se utilizan las funciones resolve y reject para indicar si la operaci贸n fue exitosa o no. Luego, se usa el m茅todo then para manejar el resultado si la promesa se resuelve con 茅xito, y el m茅todo catch para manejar el motivo del rechazo si la promesa es rechazada.

En resumen, las promesas en JavaScript permiten manejar operaciones as铆ncronas de una manera m谩s estructurada y f谩cil de leer, y han mejorado la forma en que se manejan las tareas asincr贸nicas en JavaScript.

Ella me dijo:

  • Prometo amarte
  • 驴Cuando?
  • Hoy, ma帽ana o nunca鈥

En el segundo then, 驴Qu茅 se pasar铆a como response?, 驴Acaso el valor retornado del primer then?.

Minuto 7
No se le llama concatenar
Se le llama encadenar

Por lo que entend铆, vendr铆a siendo como una condicional pero as铆ncrona.

Promesa=Condici贸n
.then= if
.catch=else

Realmente no me qued贸 claro pero investigar茅 por otras fuentes para reforzar

Para clarificar mejor los conceptos les recomiendo ir a la clase de Que son las promesas del Curso de Asincronismo con JavaScript donde se explica m谩s detalladamente este concepto y sus elementos.

creo que es muy avanzado el uso de promises por ahora ya que es m谩s 煤til con los asincronismos鈥ue todav铆a no vimos en la ruta

YO ENTENDI ASI LA CLASE ESPERO PUEDA AYUDAR EN ALGO SI QUIZA NO ENTENDIERON鈥

Para los que como yo cuando terminaron esta clases se quedaron con muchas dudas de como funcionan las promesas, les dejare un video tutorial que me ayud贸 bastante a entenderlo.

https://youtu.be/rKK1q7nFt7M

Aunque no lo creas, las promesas de JavaScript son una poderosa caracter铆stica que te ayudar谩n a ejecutar c贸digo asincr贸nico en JavaScript. En la mayor铆a, si no en todas las entrevistas para empleos que usen JS, tu entrevistador probablemente har谩 una pregunta sobre las promesas.

Seg煤n lo que he aprendido en esta clase, he notado la introducci贸n de varios conceptos nuevos, algo que me pas贸 a m铆 tambi茅n. Para comprenderlos mejor, decid铆 realizar una investigaci贸n adicional y me encontr茅 con un blog que proporciona una explicaci贸n detallada sobre las promesas en JavaScript. Esto ha sido de gran ayuda para no sentirme tan perdido al seguir los pr贸ximos videos. Espero que este recurso les sea 煤til tambi茅n: <https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke>

ufff interesante este tema de las promesas, por experiencia propia tomando ya otros cursos estoy seguro que habr谩 un par de clases o curso mismo dedicado especialmente a esto. Pues este curso es solo para mostrarnos la evolucion de JS y porque aun sigue siendo el mas usado desde el '94

Promesa: Una promesa en JavaScript representa una operaci贸n as铆ncrona que puede tener 茅xito (resolverse) o fallar (rechazarse). En ese sentido, puedes considerar una promesa como una especie de 鈥渃ondici贸n futura鈥. No es una condici贸n en el sentido tradicional, ya que no es una evaluaci贸n inmediata de una expresi贸n booleana, sino que espera a que se complete una operaci贸n as铆ncrona.

.then: El m茅todo .then se usa para encadenar acciones que se ejecutar谩n una vez que la promesa se resuelva exitosamente. Puedes pensar en 茅l como un bloque de c贸digo que se ejecuta si la 鈥渃ondici贸n futura鈥 (la promesa) se cumple. Sin embargo, este bloque de c贸digo se ejecutar谩 asincr贸nicamente, despu茅s de que la promesa se resuelva.

.catch: El m茅todo .catch se utiliza para manejar errores que ocurran durante la ejecuci贸n de la promesa. Es similar a un bloque de c贸digo que se ejecuta en un 鈥渆lse鈥 despu茅s de que la 鈥渃ondici贸n futura鈥 falle (la promesa se rechace). Al igual que .then, este bloque se ejecutar谩 asincr贸nicamente despu茅s de que ocurra un error.

Aqu铆 tienes un ejemplo que muestra c贸mo se pueden usar promesas en combinaci贸n con condiciones para lograr un comportamiento condicional as铆ncrono:

function realizarOperacion() {
  return new Promise((resolve, reject) => {
    // Simulando una operaci贸n as铆ncrona
    setTimeout(() => {
      const exito = true; // O alguna condici贸n l贸gica
      if (exito) {
        resolve("Operaci贸n exitosa");
      } else {
        reject("Operaci贸n fallida");
      }
    }, 1000); // Simulaci贸n de retardo de 1 segundo
  });
}

realizarOperacion()
  .then((resultado) => {
    console.log(resultado); // Se ejecuta si la operaci贸n tiene 茅xito
  })
  .catch((error) => {
    console.error(error); // Se ejecuta si la operaci贸n falla
  });

En resumen, las promesas en JavaScript se utilizan para manejar operaciones as铆ncronas y proporcionan un flujo de control m谩s ordenado que las devoluciones de llamada (callbacks) anidadas. Aunque se pueden usar en combinaci贸n con condiciones para lograr un comportamiento condicional as铆ncrono

Siendo sincero esta clase no entend铆 a efectos pr谩cticos cuando se utilizar铆a, el ejemplo es bastante malo para explicarlo

Es dif铆cil de entender sin un caso pr谩ctico pero pinta 煤til

https://www.youtube.com/watch?v=frm0CHyeSbE

Este video tal vez les ayude con el tema, mucha suerte!

Aqui doy un ejemplo explicano de otra forma el ejemplo del profesor. la explicaci貌n del profesor es buena.

Creo que falto definir los estados de las promesas. resuelto, rechazado y pendiente.

pero siempre va el resolve y el reject o no, en cualquier codigo

esta parte es bastante signos lo que pide en la funcion

como el profesor va a decir algo llamado then?
platzi, soy muy fan de la escuela, pero estos cursos pasan por un filtro antes de publicarse?

馃摋 Archivos del Proyecto 馃摋


Pasos 馃搶

  • 鈥 Dentro de la carpeta es6, crear el archivo llamado: 06-promises.js
      • 鈼 El c贸digo de los ejercicios queda:
//Compilar: seleccionar el c贸digo + click derecho + Run Code

//Ejercicio #1
const anotherFunction = () => {
	return new Promise((resolve, reject) => {
		if(false) {
			resolve('Hey!!');
		} else {
			reject('Whoooops!');
		}
	})
}

anotherFunction()
	.then(response => console.log(response))
	.catch(err => console.log(err));

/*output con if(true):
Hey!!
*/

/*output con if(false):
Whoooops!
*/

鈥淎lgo llamado then鈥 Explicaci贸n chafa, que no dice nada. -_-

En JavaScript, una promesa es un objeto que representa la eventual finalizaci贸n (o falla) de una operaci贸n as铆ncrona y la obtenci贸n de su resultado. Es una forma de trabajar con c贸digo as铆ncrono de manera m谩s estructurada y f谩cil de manejar.

Una promesa puede estar en uno de los siguientes estados:

Pendiente (pending): Estado inicial de una promesa, mientras la operaci贸n as铆ncrona est谩 en progreso. La promesa a煤n no se ha resuelto ni se ha rechazado.

Cumplida (fulfilled): La operaci贸n as铆ncrona se complet贸 con 茅xito y se cumpli贸 la promesa. En este estado, la promesa tiene un valor de resultado asociado.

Rechazada (rejected): La operaci贸n as铆ncrona fall贸 o fue rechazada, y se rechaz贸 la promesa. En este estado, la promesa tiene un motivo de rechazo asociado, que generalmente es un objeto de error que indica la raz贸n del rechazo.

Una promesa se crea utilizando el constructor Promise. Toma una funci贸n con dos par谩metros: resolve y reject. Dentro de esta funci贸n, se realiza la operaci贸n as铆ncrona y, una vez que se completa, se llama a resolve para cumplir la promesa o a reject para rechazarla.

Aqu铆 hay un ejemplo b谩sico de c贸mo crear y utilizar una promesa en JavaScript:

const miPromesa = new Promise((resolve, reject) => {
  // Simulamos una operaci贸n as铆ncrona que tarda 2 segundos
  setTimeout(() => {
    const exito = true;

    if (exito) {
      // La operaci贸n se complet贸 exitosamente
      resolve('隆Promesa cumplida!');
    } else {
      // La operaci贸n fall贸
      reject('Hubo un error en la promesa.');
    }
  }, 2000);
});

// Manejo de la promesa
miPromesa.then(resultado => {
  console.log(resultado); // '隆Promesa cumplida!'
}).catch(error => {
  console.log(error); // 'Hubo un error en la promesa.'
});

En este ejemplo, creamos una promesa miPromesa que se resuelve despu茅s de 2 segundos. En el constructor de la promesa, se pasa una funci贸n que simula una operaci贸n as铆ncrona. Si la operaci贸n tiene 茅xito, llamamos a resolve y pasamos el mensaje de 茅xito como argumento. Si la operaci贸n falla, llamamos a reject y pasamos un mensaje de error.

Luego, utilizamos los m茅todos then y catch para manejar el resultado de la promesa. El m茅todo then se ejecuta cuando la promesa se cumple, y el m茅todo catch se ejecuta cuando la promesa es rechazada. En cada caso, imprimimos el resultado o el error correspondiente en la consola.

Las promesas proporcionan una forma m谩s elegante y legible de trabajar con c贸digo as铆ncrono, evitando el anidamiento excesivo de callbacks y facilitando el manejo de errores. Adem谩s, las promesas son la base de caracter铆sticas m谩s avanzadas de JavaScript, como async/await.

Se me ocurri贸 este peque帽o ejemplo para practicar, espero les resulte divertido jaja

const detonante = Math.floor(Math.random()*10);

function explode(trigger){
    return new Promise((resolve ,reject)=>{
        if(trigger > 4){
            resolve("隆隆隆BOOOOOOOOOOOOOM!!!");
        }
        else{
            reject("failed bomb");
        }
    })
}

explode(detonante)
    .then(response => console.log(response))
    .catch(err => console.log(err));

Aqu铆 es donde uno dice 鈥淓se dinero se perdi贸鈥 !!!

Aca mi aporte con async await y manejo de errores con try catch

const myAsyncFunction = async() => {
  try {
      let myPromise = new Promise((resolve, reject) => {
        var condition = true ? 
        resolve('La promesa se resolvi贸 exitosamente') 
         : 
        reject(`La promesa fue rechazada`);
      });
      let result = await myPromise;
      console.log(result);
  } catch (err){
      console.log(err)}; 
  }
  
  myAsyncFunction();

Lo que aprend铆:
El par谩metro de una promesa es una funci贸n y esa funci贸n define el trabajo que se va realizar dentro de la promesa y esa funci贸n tiene 2 argumentos resolve y reject. Cuando se completa el trabajo de esa funci贸n se llama a la funcion resolve o reject para cambiar el estado de la promesa a resuelto o rechazado

Esta clase debo aceptar que si fue algo confusa鈥ero leyendo los recursos de la clase y de las otras he podido entender bien todo. Sugiero que lean esa descripci贸n, ya que se explica m谩s a detalle e incluso m谩s cosas de las clases.

Mi resumen:

La verdad si deja con mal sabor de boca este video buscando en Youtube yo recomendaria JhonMircha y tambien este video que me parecio super genial la manera en como lo explica y el ejemplo que coloca
https://www.youtube.com/watch?v=p3Oq3AfuteA&t=20s

11/35 ES6: promesas

Una promesa en JavaScript es una forma de manejar el asincronismo en el c贸digo. Las promesas se representan como objetos que pueden generar un valor 煤nico en el futuro, y tienen dos estados:

  • resueltas
  • rechazadas

En caso de que haya alguna raz贸n por la que no se hayan resuelto.

Para utilizar las promesas, se utiliza la clase Promise y sus m茅todos then and catch, los cuales se a帽adieron en ES6 para solucionar el problema del Callback hell.

La clase primse recibe como argumento una funci贸n que tiene dos par谩metros:

  1. resolve: que se ejecuta cuando la promesa se resuelve.
  2. reject: que se ejecuta cuando la promesa se rechaza.
const promesa = () => {
return new Promise((resolve, reject) => {
if (algo) {
resolve("La promesa se ha resuelto")
} else {
reject("La promesa se ha rechazado")
}
})
}

promesa()
.then(respuesta => console.log(respuesta)) // En caso de que se ejecute resolve
.catch(error => console.log(error)) // En caso de que se ejecute reject

En este ejemplo, la promesa devuelve un mensaje dependiendo del valor de la variable 鈥渁lgo鈥. Luego, se utiliza el m茅todo then para mostrar la respuesta en caso de que se resuelva la promesa, y el m茅todo catch para mostrar un error en caso de que se rechace la promesa.

Uff lamentablemente la peor clase que he visto en Platzi hasta ahora. No se explica absolutamente nada. Si alguien sale de esta clase entendiendo que es una promesa, lo sab铆a de antemano o es un genio.
Est谩 bien que te dirijan a otros cursos para complementar lo aprendido, pero es que aqu铆 no sales ni con conceptos b谩sicos, no hay nada que complementar, tienes que ir a buscar el conocimiento a otra parte.

La explicacion pudo ser un poco confusa pero no hay porque dar un feedback de esa manera, se nota que gndx a mejorado mucho y que se esfuerza por segui haciendolo. En todos las clases y cursos le dejan comentario de que ha mejorado. Traten como les gustaria que los trataran.

No entiendo :C esta confusa la clase,

La analog铆a de la promesas en JS, con la cual entend铆 hace a帽os que aprend铆 en otro curso de Platzi y de esta forma le explicaba a mis compa帽eros de trabajo.

La promesa de javascript:
Comenzar茅 inmediatamente a trabajar en la promesa, pero s铆 o s铆 te responder茅. Sea rechazada o aprobado, pero s铆 o s铆 te responder茅.

el ejemplo esta bien pero le falta asi qeu me puse a investigar un poco mas como funcionana las promesas y me cree este ejemplo

const data = [
  {
    nombre: "fere",
    edad: 30,
    carrera: "Tecnolgias Computacionales",
  },
  {
    nombre: "venusina",
    edad: 22,
    carrera: "psicologia",
  },
  {
    nombre: "jessi",
    edad: 40,
    carrera: "modelo",
  },
];

const getdatos = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => { // hago un retardo de 5 segundos
      resolve(data);
    }, 5000);
  });
};

getdatos()
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

y tambien me encontre este video en youtube
que esta super bien explicado

https://www.youtube.com/watch?v=rKK1q7nFt7M

espero a alguien le ayude com a mi

Les dejo mis apuntes que tome de un curso de freecodecamp de las promesas. Te lo explican con peras y manzanas.

/*Una promesa es un objeto de javascript que representa el eventual resultado (o error) de una operaci贸n as铆ncrona.
Los tres posibles estados de una promesa son: Pendiente, Cumplida, Rechazada.
El objeto de la promesa se asocia a una funci贸n callback que se ejecuta al cumplirse la operaci贸n asincrona.
Una funci贸n callback es una funci贸n que se pasa a otra funci贸n como argumento y luego se ejecuta dentro de la
funci贸n externa*/
/*Las promesas tienen un m茅todo .then(), con el cual podemos decidir qu茅 ocurre cuando se completa la promesa (茅xito o error)*/

//Primer ejemplo
const promesaCumplida = false;
const miPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (promesaCumplida) {
      resolve('隆Promesa cumplida!');
    } else {
      reject('Promesa rechazada...');
    }
  }, 3000);
});

function manejarResolve(valor) {
  console.log(valor);
}
function manejarReject(razonRechazo) {
  console.log(razonRechazo);
}

miPromesa.then(manejarResolve, manejarReject);
// En el ejemplo de arriba, los parametros resolve y reject son funciones que representaran el resultado de la promesa.
// En el metodo .then(), el parametro (valor) de la funciones manejarResolve y manejarReject representa el argumento que se le pasa a resolve/reject.

//Segundo ejemplo

const estatusPedido = function() {
  return Math.random() < 0.8;
};

const miPedidoDePizza = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (estatusPedido()) {
      resolve("隆Pedido exitoso! Su pizza esta en camino.");
    } else {
      reject("Ocurrio un error. Por favor intente nuevamente.");
    }
  }, 3000);
});

const manejarPedido = (mensajeDeConfirmaci贸n) => {
  console.log(mensajeDeConfirmaci贸n);
};
const rechazarPedido = (mensajeDeError) => {
  console.log(mensajeDeError);
};

//Primera manera de usar el .then()
//miPedidoDePizza.then(manejarPedido, rechazarPedido);

//Segunda manera de usar el .then()
 miPedidoDePizza.then(manejarPedido).then(null, rechazarPedido);

 //Tercera manera de hacerlo con .catch() el cual es un m茅todo de promesa que solo se ejecuta si la promesa es rechazada.
 //miPedidoDePizza.then(manejarPedido).catch(rechazarPedido);


 //Ejemplo 3: Otra manera de hacerlo es definir una funci贸n que en su return regrese una promesa.
 const anotherFunction = () => {
  return new Promise((resolve, reject) => {
    if(true) {
      resolve("Operaci贸n terminada con exito.");
    } else {
      reject("Operaci贸n rechazada.");
    }
  });
 };

 //En este caso ejecutamos la funci贸n para que devuelva la promesa.
 anotherFunction()
  .then(respuesta => console.log(respuesta))
  .catch(error => console.warn(error));



Espero sea de ayuda para enteder esta clase, en mi opini贸n si est谩s empezando de cero como yo, t贸malo como un previo al tema de asincronismo en JS, en el siguiente curso se abordar谩 a fondo el tema.

/* PROMESAS O PROMISES.*/

const anotherFunction = () => {


    //Retornar una promesa (Algo que va a pasar, puede ser hoy, ma帽ana o nunca), que puede ser resuelta (resolve) o rechazada (reject).// 
    return new Promise ((resolve, reject)=>{


        //Si la promesa es resuelta (true que viene siendo resolve)// 
        if (false) {
            resolve('a webo!!!') 

        // Si la promesa es rechazada (false que viene siendo reject)//    
        } else {

            reject('chale, no se pudo');
        }
    }) 
}


//Aqu铆 se ejecuta la promesa, usando las palabras reservadas 'then' y 'catch'//
anotherFunction()


 .then(response => console.log('Se resolvi贸 la promesa, ' + response)) 
 //Si la promesa es resuelta (true), se ejecutar谩 '.then' y el mensaje asignado al 'resolve' se manda a llamar con 'response'.//



 .catch(error => console.log('No se resolvi贸 la promesa, ' + error)); //Si la promesa no es resuelta o fallida (False), se ejecutar谩 '.catch' y el mensaje asignado al 'reject' se manda a llamar con 'error'.// 

Dejo mi aporte, comentado

//Promesas - es una forma de manejar el asincronismo
const anotherFunction = () => {
    return new Promise((resolve, reject) => {
        if (true /*something*/) { //Si se ejecuta con exito
            resolve("Exito - Funcion贸!")
        } else { //Si no se ejecuta con exito - Error
            reject("Error - No funcion贸");
        }
    })
}

anotherFunction()
    .then(response => console.log(response))//En caso que se ejecute Resolve
    .catch(error => console.log(error)) //En caso que se ejecute Reject

Ven铆amos bien con las clases pero鈥 En este caso les recomiendo leer la explicaci贸n escrita abajo de la clase. Van a entender mejor que con el video y las analog铆as de 鈥渉oy, ma帽ana o nunca鈥 鈥

Promesas
En JavaScript, una promesa es un objeto que representa el resultado de una operaci贸n as铆ncrona. Una promesa tiene dos estados: pendiente (pending) y cumplida o rechazada (fulfilled or rejected). Una vez que una promesa se ha cumplido o rechazado, su estado no puede cambiar.

Una promesa se crea mediante la funci贸n Promise y se le pasa como argumento una funci贸n que recibe dos callbacks, resolve y reject. Dentro de esta funci贸n, se ejecuta la operaci贸n as铆ncrona y, dependiendo del resultado, se llama a resolve o reject.

Una vez creada la promesa, podemos utilizar sus m茅todos then y catch para especificar qu茅 hacer cuando la promesa se cumple o rechaza.

Operaciones Asincronicas

Las operaciones as铆ncronas son aquellas que no bloquean la ejecuci贸n del c贸digo mientras se realizan. Esto significa que el c贸digo contin煤a ejecut谩ndose mientras se realiza la operaci贸n as铆ncrona, en lugar de esperar a que se complete para continuar.

Existen varios ejemplos de operaciones as铆ncronas en JavaScript, como las peticiones HTTP, las operaciones con una base de datos, el acceso al sistema de archivos, entre otros.

En JavaScript, las operaciones as铆ncronas se manejan principalmente mediante callbacks y promesas. Los callbacks son funciones que se pasan como argumentos y se ejecutan una vez que la operaci贸n as铆ncrona ha terminado. Las promesas, por otro lado, son objetos que representan el resultado de una operaci贸n as铆ncrona y proporcionan una forma m谩s ordenada y sencilla de manejar el flujo de control.

Callbacks

En programaci贸n, un callback es una funci贸n que se pasa como argumento a otra funci贸n y que se ejecuta una vez que se completa una tarea espec铆fica. Es una forma de manejar el asincronismo en JavaScript.

Un ejemplo com煤n de uso de callbacks es cuando se realiza una petici贸n HTTP mediante JavaScript. La petici贸n se realiza de forma as铆ncrona, lo que significa que el c贸digo contin煤a ejecut谩ndose mientras se espera la respuesta del servidor. Una vez que se recibe la respuesta, se ejecuta una funci贸n de callback que procesa la informaci贸n recibida

const mipromesa = () =>{
return new Promise((resolve, reject) => {
const num =9;
const num2=4;

    if (num <num2){
        resolve("bien se cumplio")
    }
    else{
        reject("no se cumplio la promesa")
    }
})

}
mipromesa()
.then(respuesta => console.log(respuesta))
.catch(error => console.log(error))

mi aporte de como segun yo entendi lo que era una promesa, si alguien me quiere corregir ningun problema jajaja

Esta clase, por el momento rompe todo el curso. No hay explicaci贸n de que es una promesa, no se explica el uso de las palabras reservadas que hasta el momento son nuevas para quienes siguen la ruta de JavaScript o Desarrollo Web. Deber铆an rehacerla o quitarla y ponerla luego del curso de asincronismo.

promiseFn().finally(etc...)

Se ejecuta tanto si da error como si la solicitud fue exitosa.

Sus promesas nunca sucedieron 馃挃

ademas de usar catch podemos usar finally que practicamente ejecuta en cualquier caso una funcion cuando termina la promesa.

.finally(() => {
    console.log('Experiment completed');
  });

Esta clase necesita ser revisada, todo el tema fue confuso.

La verdad me costo entenderlo, pero esete link lo explica bastante detallado y facil de entender 馃槂

Aqu铆 una mejor explicaci贸n https://youtu.be/3jfRLyyQ_4w
Aqu铆 les dejo una explicaci贸n no m谩s elaborada quiz谩 pero m谩s entendible.
Bueno, me parece que me voy a youtube a entender esto.

Para entender las promesas es muy importante que tengas claro los conceptos de sincronismo y asincronismo, aqu铆 un art铆culo que lo explica

Todo se jodio desde el 5:44.

Vengo del curso de Asincronismo con JavaScript y ah铆 ver谩n mas a fondo las promesas! 脕nimos, que con esto trabajaremos en un futuro!

Si a煤n no sabes en qu茅 consiste el asincronismo, no te preocupes, existen cursos completos en los que se profundiza mas en el tema:

-No pierdas animos continue, te estoy viendo.
馃挌Y Nunca Pares de aprender 馃挌

Repositorio github del profe 鈫 Archivo manejado en la clase:

Best Teacher Bro!!!

Esta clase si estuvo algo confusa, habr谩 que ver esos otros cursos,

Las promesas explicadas a detalle en c贸digo
.

Consumidores: then y catch

Un objeto Promise sirve como enlace entre el ejecutor y las funciones consumidoras, que recibir谩n un resultado o un error. Las funciones de consumo pueden registrarse utilizando los m茅todos .then y .catch

then

El m谩s importante y fundamental es .then.

La sintaxis es:

promise.then(
  function(result) { /* manejar un resultado exitoso */ },
  function(error) { /* manejar un error */ }
);

El primer argumento de .then es una funci贸n que se ejecuta cuando se resuelve la promesa y recibe el resultado.

El segundo argumento de .then es una funci贸n que se ejecuta cuando se rechaza la promesa y recibe el error.

Por ejemplo, aqu铆 hay una reacci贸n a una promesa resuelta con 茅xito:

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("hecho!"), 1000);
});

// resolve ejecuta la primera funci贸n en .then
promise.then(
  result => alert(result), // muestra "hecho!" despu茅s de 1 segundo
  error => alert(error) // no se ejecuta
);

catch

Si solo nos interesan los errores, entonces podemos usar null como primer argumento: .then(null, errorHandlingFunction). O podemos usar .catch(errorHandlingFunction), que es exactamente lo mismo:

et promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Vaya!")), 1000);
});

// .catch(f) es lo mismo que promise.then(null, f)
promise.catch(alert); // muestra "Error: 隆Vaya!" despu茅s de 1 segundo

La llamada .catch(f) es un an谩logo completo de .then(null, f), es solo una abreviatura.

Pir谩mide infernal

A primera vista, es una forma viable de codificaci贸n asincr贸nica. Y de hecho lo es. Para una o quiz谩s dos llamadas anidadas, se ve bien.

Pero para m煤ltiples acciones asincr贸nicas que van una tras otra, tendremos un c贸digo como este:

loadScript('1.js', function(error, script) {

  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', function(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('3.js', function(error, script) {
          if (error) {
            handleError(error);
          } else {
            // ...continua despu茅s de que se han cargado todos los script (*)
          }
        });

      }
    });
  }
});

A medida que las llamadas se anidan m谩s, el c贸digo se vuelve m谩s profundo y dif铆cil de administrar, puede incluir m谩s bucles, declaraciones condicionales, etc.
A esto se le llama 鈥渋nfierno de callbacks鈥 o 鈥減ir谩mide infernal鈥