No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
13H
53M
57S

ES6: promesas

13/38
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 32

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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 “algo llamado then” y si bien es una ‘palabra reservada’, decir que es una ‘palabra reservada’ no aporta nada, es un método, y por ser un método se “llama” o “ejecuta” y recibe parámetros, en este caso un callback… no es tan díficil llamar a las cosas por su nombre.

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

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

Este video me ayudó a entender más claramente las promesas.

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

Promises, un antes y despues en JavaScript 💛

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

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

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

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

Punto a favor para omitir los semicolons 😆

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 🤔…

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)

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

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.

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.

Las promesas explicadas a detalle en código
.

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 “infierno de callbacks” o “pirámide infernal”