Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clase 11 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

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

David Granados

student•

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.

Jonathan Barzola

student•

Buen aporte David!

Jeanpierre Echevarria

student•

Interesante...

Daniel Triana

student•

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

Luis Fernando Baldovino De Castro

student•

Completamente de acuerdo. Seguire adelante y vere fuentes externas a ver si entiendo mas, pero con lo aprendido hasta ahora, no me parece oportuno haber visto este tema. No entiendo la estructura del final, donde llaman a la funcion y de esta se desprenden .then y .catch sin estar dentro de llaves o alguna otra estructura conocida.

Julian Franco

student•

Hay dos cursos más que tocan a profundidad este tema

Irving Caamal

student•

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/

Josue Cerron Tuesta

student•

Así es bro!

Juan David Reyes

student•

esta imagen está en cada clase que hablan de asincronismo xd

Edier Gama

student•

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

Eduardo Zegers

student•

se puso interesante jajaja

Andrea Alejandra Martínez Garnica

student•

da miedo, si de por sí me costó trabajo los arrays, da más cosa esto.

Diego Perez Perez

student•

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

Damián De Aguiar

student•

Con ese video me quedó mucho más claro como funciona, no como lo que hace Gndx en la clase que no explica nada :( Gracias por el aporte!

Damián De Aguiar

student•

Dejo el ejemplo del video explicado paso a paso como funciona, creo que se entiende:

  /* Primero que todo, acá tenemos varias cosas en paralelo asociadas a asincronismo */

   /* Tenemos la función cuadradoPromimse que resive un valor y genera una promesa, osea que en algún momento retornará algo a partir del valor entregado */

function cuadradoPromise(value){
   /* En caso de que la promesa se resuelva de manera correcta, devuelve la instrucción del resolve, en caso contrario, la del reject */
   return new Promise((resolve, reject) => {
      /* En este caso se usa setTimeout como la promesa a ejecutar. 
      SetTimeout que es otro atributo del asincronismo el que devuelve algo depsués de un tiempo, en este caso devuelve el resolve */
      setTimeout(() => {
      /* Vemos que después de pasado el tiempo del setTiemout se devuelve el resolve que es un objeto que contiene a value y a result= value*value. En caso de fallar la promesa, osea que no funcione el setTimeout, devuelve el reject pero no lo definimos en este ejemplo*/
         resolve({
            value,
            result:value*value
         });
      }, 0|matchMedia.random()*1000); /* Esto es simplemente que el tiempo de espera del setTiemout sea random entre 0 y 1000 milisegundos */
   });
}

/* A continuación podemos ver otra componente del asincronismo que podemos usar. Es concatenar la salida de una función ejecutada correctamente (osea su resolve) como input a otra función.  */

/* En este caso vemos como se llama a la función cuadradoPromise con el valor 0 como input. Luego, si se ejecuta correctamente, dicha función restornará con el resolve que como vimos, es un objeto de dos valores  */
cuadradoPromise(0)

/* Entonces, si la función cuadradoPromise(0) se ejecuta correctamente, el resolve entrará en la función then, siendo "obj" el resolve de cuadradoPromise */
   .then((obj)=> {
      console.log('inicio Pormise');
      console.log('Proimise: ${obj.value}. ${obj.result}');
   })

   /* Por último, si la promesa no se resuelve satisfacotriamente, osea que cuadradroPrimise(0) retorna con un reject, se ejectura lo que se diga en catch. Es como un then pero para el caso de que la promsea se rechace. */
   .catch();

Yuli Alexandra Pulido Castañeda

student•

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

Victor Jordan

student•

gracias.Saludos

Marcel Marin

student•

Crack, llevo todas las clases copiando tu codigo de una vez ! jeje

David Torres Guevara

student•

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

Julia Gabriela Nieva Paredes

student•

De acuerdo, pero es que, como yo veo el curso, es sólo una revisión de la evolución de JS, no una explicación específica de asincronismo. O será que yo tengo algo de experiencia en flutter, y allá usan los Futures en lugar de promesas, pero la idea es combinar el uso de los try con recuperar algo que quizá no se pueda. Por ejemplo, si estás tratando de que tu app móvil descargue algo de la red, y no hay conexión, ahí empleas las promesas. Sin el asincronismo, a fuerza tu app se vería pausada o incluso trabada por que necesita datos para continuar. Pero con el asincronismo le puedes decir que intente recuperar algo, y si no se puede, le dices que tenga otro comportamiento, sin que la app se quede colgada. Espero haberte ayudado.

Rubén Ernesto Aragón Gil

student•

Javier Amador Amador

student•

una imagen dice mas que mil palabras, gracias

Orlando Alonso Gonzales Paz

student•

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.

Porfirio González López

student•

Apunte en Notion

Link: https://pogolo.notion.site/10-ES6-promesas-083641f0b6f34e57ad9ba2eb67f061db

Teo Zavala

student•

que buen resumen, me ayudo a entender la clase. Directo a mis apuntes.

LESTHER XITUMUL MANUEL

student•

Te recomiendo leer fuentes externas para anotar definiciones. En este caso el concepto que anotaste de "Promesas" la hace falta demasiado contexto. Yo lo que hago es buscar una definición externa y también anotar la que comparten en clase :D

Jhon Eduard Bocanegra Ortiz

student•

Promises, un antes y despues en JavaScript 💛

Edgar Alfredo López Salero

student•

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

Maria Soledad Lanfranconi

student•

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

Maria Soledad Lanfranconi

student•

me dio este ejemplo: que opinan?

function descargarArchivo(url) {
  return new Promise(function(resolve, reject) {
    // Realizar la descarga del archivo aquí
    // ...
    // Si la descarga se ha completado con éxito, llamar a resolve
    resolve();
    // Si ha habido algún error, llamar a reject
    reject(new Error('Error al descargar el archivo'));
  });
}

// Usar la función descargarArchivo y manejar el resultado con then y catch
descargarArchivo('https://ejemplo.com/archivo.txt')
  .then(function() {
    console.log('La descarga del archivo ha finalizado');
  })
  .catch(function(error) {
    console.error(error);
  });

Zajith Corro Viveros

student•

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

Julia Gabriela Nieva Paredes

student•

Por eso es asíncrono este asunto.

Manuel Cabos

student•

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

Fernando Espiritu

student•

esta chido !!

Felipe Molano Corredor

student•

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

Antonio Rafael González Ferrer

student•

Punto a favor para omitir los semicolons 😆

Josue Cerron Tuesta

student•

Jonner paz

student•

He visto esta clase como 2 o 4 veces y sigo sin entender la diferencia de las promises con un try catch normal, dejando de lado los metodos de las promises. Ademas, en esta clase creo que se añadieron conceptos que no quedan del todo claros, como 'then', 'catch' y 'response'. Todo el curso ha venido sumamente entendible y ameno hasta esta clase, donde siento que me he perdido