Promesas

Clase 37 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase veremos las promesas, que son valores que aun no conocemos. Las promesas tienen tres estados:

pending
fullfilled
rejected

Las promesas se invocan de la siguiente forma:

new Promise( ( resolve, reject ) => {
  // --- llamado asíncrono
  if( todoOK ) {
     // -- se ejecutó el llamado exitosamente
     resolve()
  } else {
     // -- hubo un error en el llamado
     reject()
  }
} )

No olvides ver el material adjunto de esta clase.

Pablo Andres

student•

Resumen de la clase: Promesas

Con los callBacks teníamos un problema al anidarlos.
Para este problema existen las ‘promesas’.

Antes era necesario usar librerías externas pero ahora la mayoría de los browsers soportan las promesas.
Si queremos verificar si las promesas son soportadas por el usuario se podría usar lo que se llama un ‘polifield’. Este detecta si el navegador donde está corriendo nuestro código no soporta las promesas, y si así es, crea las clases de las promesas por nosotros y así podrían ser utilizadas por nosotros de manera transparente para nuestro código.

Qué son las promesas?
Tenemos que pensar las promesas como valores que aún no conocemos. Es la promesa de que ahí va a haber un valor cuando una acción asíncrona suceda y se devuelva.

Las promesas tienen 3 estados y son como cualquier otro objeto de javascript.

El primero de los estados es ‘pending’. Es el estado cuando las creamos.
Si se resuelve exitosamente pasa al estado ‘fulfilled’.
Si ocurre algún error y no se resuelve pasa al estado de ‘rejected’.

Las promesas pueden no ser asíncronas también.

Para obtener el valor de la resolución de la promesa llamamos a la función _.then(val =>) _a la que le vamos a pasar como parámetro otra función en la que el primer parámetro será el valor que esperábamos.

Si sucede algún error agregamos el método .catch(err=>) al que se le asigna una función también como parámetro que va a recibir el error.

Las promesas se declaran de la siguiente manera:

new Promise( function( resolve, reject ) {
    ...
}).then( valor => {
    ...
}).catch( err => {
    ...
})

Se crea el nuevo objeto y se le asigna una función con dos parámetros ‘resolve’ y ‘reject’. Estas son dos funciones que debemos llamar si la promesa se resuelve o no.
Si se resuelve exitosamente llamamos a ‘.then(valor =>’ para obtener el valor del promise dentro del arrow function (valor=>).
Si sucede algún error podemos llamar al ‘.catch( err =>’ para obtener el tipo de error que sucedió y actuar en consecuencia.

Otra cosa más a cerca de las promesas es que luego de llegar al estado de 'fulfilled’ podemos retornar otra promesa dentro del .then y de esa manera ir encadenándolas en sucesivas acciones asíncronas. Cada una de ellas puede ser resuelta o rechazada en una nueva promesa que terminará en el estado de ‘fulfilled’.

Entonces en nuestro código borramos las invocaciones anidadas y volvemos a modificar obtenerPersonaje().

function obtenerPersonaje() ya no recibirá un callback, directamente va a retornar una promesa.

function obtenerPersonaje(id) {
    return new Promise( function(resolve, reject){ 
        ...
    })
}

Como arrow function:

function obtenerPersonaje(id) {
    return new Promise((resolve, reject) => { 
        ...  //Aquí dentro se genera el llamado asíncrono   ...
    })
}

Dentro de esta función se va a generar el llamado asíncrono.
Devolvemos la generación de url y el $.get con el parámetro ‘callback’ reemplazado por una nueva función a modo de callback que se va a ejecutar recién cuando el get haya sido exitoso resolviendo la promesa. Por lo que le pasamos el parámetro ‘data’, a través del cual van a llegar los valores de nuestro personaje, y dentro de la función invocamos, a su vez, a la función resolve.
También vamos a vover a insertar el método .fail() invocando el parámetro/función ‘reject’ con parámetro ‘id’.

function obtenerPersonaje(id) {
    return new Promise((resolve, reject) => {
        const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
        $
            .get(url, opts, function(data){
                resolve(data)
            })
            .fail(() => reject(id))
    })
}

La función se invocaría entonces solamente con el parámetro id.

obtenerPersonaje(id)

La forma de obtener el valor es llamando al .then() con su respectiva función como parámetro que va a estar trayendo a nuestro personaje a través del parámetro ‘data’ que está en la función invocada en los parámetros del .get si este es exitoso.

obtenerPersonaje(1)
    .then(function(personaje){
        console.log(personaje.name)
    })

Y si sucede algún error en nuestro callback lo vamos a obtener con el método .catch() que va a recibir el id que viene a través del .fail() de la función.

function onError(id){
    console.log(`ERORRRRRRR!!!!!!!!!!! No se pudo obtener el personaje con id = ${id}.`)
}

obtenerPersonaje(1)
    .then(function(personaje){
        console.log(personaje.name)
    })
    .catch(function(id){
        onError(id)
    })

O directamente invocamos la función desde el parámetro del .catch:

function onError(id){
    console.log(`ERORRRRRRR!!!!!!!!!!! No se pudo obtener el personaje con id = ${id}.`)
}

obtenerPersonaje(1)
    .then(function(personaje){
        console.log(personaje.name)
    })
    .catch(onError)

Código final completo:

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = { crossDomain: true}

function obtenerPersonaje(id) {
    return new Promise((resolve, reject) => {
        const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
        $
            .get(url, opts, function(data){
                resolve(data)
            })
            .fail(() => reject(id))
    })
}

function onError(id){
    console.log(`ERORRRRRRR!!!!!!!!!!! No se pudo obtener el personaje con id = ${id}.`)
}

obtenerPersonaje(1)
    .then(function(personaje){
        console.log(personaje.name)
    })
    .catch(onError)

Gian Pumayalla

student•

Me ayudo mucho, gracias!

Way Solutions

student•

Excelente Aclaracion

César López

student•

Código del video

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id/'

const opts = { crossDomain: true }


function persona(id){

	return new Promise ((resolve, reject)=>{
		const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
		
		$
			.get(url, opts, function(data){
				resolve(data)
			})
			.fail(()=> reject(id)
			)
	})		
}

function onError(id){
	console.log(`Sucedió un error al obtener el personaje ${id}`)
}

persona(1)
	.then(function(personaje){
		console.log(`El personaje 1 es ${personaje.name}`)
	})
	.catch(onError)

Enrique Gálvez

student•

ya funciona, se me olvido incluir jquery

Adolfo Cruz Basilio Geniz

student•

@redcesar como te ha ido desde este punto en tu carrera?

José María Cuevas Ramírez

student•

Otra manera en la que puede quedar el código es poniendo los métodos .then() y .catch() al final de la promesa.

(De modo que quedaría como la esctructura base de una promesa que mostró Sacha)

Esta manera para mi es más clara y facilitará el llamado múltiple de la función (como por ejemplo que tengamos más código en donde hagamos llamado de la función más de una sola vez)

const API_URL = "https://swapi.co/api/"
const PEOPLE_URL = "people/:id"

const opts = { crossDomain: true}

const onPeopleResponse = function (character) {
    console.log(`Hi! I'm ${character.name}`)
}

function getCharacter(id) {
    return new Promise (function (resolve, reject) {

        const characterUrl = `${API_URL}${PEOPLE_URL.replace(":id", id)}`
        $.get(characterUrl, opts, function (data) {
            resolve(data)
        }).fail(function () {
            reject(id)
        })

    }).then(function (character) {
        console.log(`Hi, I'm ${character.name}`)
    }).catch(function (id) {
        console.log(`There was an error with the ${id}`)
    })

}

getCharacter(1)

Es simplemente tener una opción más.

David Quintana

student•

Si, es mucho mas legible

Jhon Carlos Colorado Angulo

student•

Cierto, tienes mucha razón. Gracias.

Natalia Jaramillo González

student•

José Gregorio Block

company_admin•

#Nice

Victor Andres Castillo Zambrano

student•

muy bueno

Rulo Code

student•

Hola Platzi Nauta ! :D si has llegado y no quieres quedar con ninguna duda sobre las promesas, te invito a ver este tutorial que he preparado para ti https://platzi.com/tutoriales/1339-fundamentos-javascript/4308-entendiendolo-todo-reguests-y-promesas/

Michelle Verano

student•

Muchísimas gracias, ayuda bastante a entender este tema.

Francisco Angel Núñez Luna

student•

lol ¿cómo supiste que no le iba a entender a la clase?

Carlos Mario

student•

José Agustin Rios

student•

Gracias

Alexander Nova Arevalo

student•

Me gusta esos apuntes :D

Willy David Da Conceicao Lozada

student•

Conclusión podemos decir que definimos un objeto de tipo promesa, si se resuelve la promesa llamamos la funcion resolve() y si falla rechazamos la promesa con reject() luego podemos obtener estos valores con .then() para el resolve() y .catch() para .rejected() | el .then() y .catch() reciben como parametros lo que mandemos de las promesas

Andrés Campuzano Garzón

student•

Gracias por la explicación, me queda un tanto difícil este tema.

EDWIN ANTONIO CAN PINTO

student•

ya no sé para donde me dirijo...

Omar Daniel Centeno

student•

¡Hola!

¿En qué te sientes perdido?

Saber que no sabemos también es una puerta para seguir aprendiendo.

¡Saludos!

Víctor Hugo Rivas Sánchez

student•

Ejercicio de promesas con fetch para no usar JQuery:

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'

const obtenerPersonaje = (id) => {
  return new Promise((resolve, reject) => {
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
    fetch(url)
      .then(data => resolve(data.json()))
      .catch(() => reject(id))
  })
}

const error = (id) => console.log(`Error al obtener personake ${id}`)

obtenerPersonaje(1)
  .then(personaje => console.log(`El personaje 1 es ${personaje.name}`))
  .catch(error)

ANGEL DAVID SULBARAN CALDERON

student•

PROMESAS Las promesas, pensemos en ellas como valores que aún no conocemos, es la promesa de que allí va a haber un valor cuando una acción asíncrona suceda y se resuelva, las promesas tienen 3 estados en los que pueden estar y son como cualquier otro objeto de JavaScript,

Pending: el primer estado que es en el que cualquier objeto se inicializa, es el estado de pending. Cuando creamos una promesa esta va a estar en estado pending, si la promesa, se resuelve, pasa al estado de fullfiled.
Fullfiled: que es cuando le llega la información, que debería estar allí cuando se resuelve, su mismo nombre lo dice, que esta cumplida la promesa, es decir se resolvió y allí llego el valor que debia llegar.
Rejected: Siendo este el ultimo estado de una promesa, que es cuando ocurre un error en la acción asíncrona que esta resolviendo y no se cumple la promesa.

Para obtener el valor de la resolución de la promesa podemos llamar a la función: .then(val=>) Y allí le vamos a pasar como parámetro otra función en la cual el primer parámetro que va a recibir esa función es el valor que nosotros esperábamos.

Por otra parte si sucede un error al resolver la promesa y nunca se resuelve y pasa al estado de rejected, vamos a llamar a la función: .catch(err=>_) Y le vamos a pasar otra función en la cual vamos a obtener como parámetro el error que sucedió. De esta manera es que creamos una promesa:


new Promise(function(resolve,reject){
    
})

Es un objeto como cualquier otro de JavaScript. Al crearla, le pasamos una función que lleva 2 parametros, “resolve” y “reject”, estas son funciones que debemos llamar de acuerdo a si la promesa se resuelve exitosamente o si sucede algún error. Si se resuelve exitosamente llamaremos a la función resolve, pasandole el valor que esperamos finalmente, si algún error sucede, llamaremos a reject pasandole el error, para obtener luego el valor que esperábamos de la resolución exitosa, podemos llamar a .then.


new Promise(function(resolve,reject){
    
}).then(valor=>)

Y allí tendriamo el valor disponible para nosotros en otra función, que como podemos observar es una arrow function, es una función que le estamos pasando al .then.

Si sucede algún error podemos llamar a .catch

new Promise(function(resolve,reject){
    
}).then(valor=>{

}).catch(err=>{
    
})

Y vamos a obtener allí el error disponible para nosotros y hacer lo que tengamos que hacer. Mostrar un mensaje al usuario o hacer algún log.

Algo más aparte de las promesas es que luego de llegar al estado de fullfiled podemos retornar otra promesa dentro del .then y de esa manera ir encadenándolas en sucesivas acciones asíncronas y cada una de ellas puede ser rechazadas o resueltas en una nueva promesa que terminara en el estado de fullfiled.

El siguiente código es muy sencillo de entender la verdad, lo que debes entender aca o tener en cuenta primeramente es sobre lo que es un request. Al entender eso, creo que lo demás es entendible en este código y si no entiendes el código a este punto, es porque no prestaste atención a las clases pasadas, asi que te aconsejo, que les eches un vistazo nuevamente, para reforzar, recuerda que los lenguajes debes aprenderlos y comprenderlos al 100% ya que cuando te toque trabajar con ellos, esta sera la base de tu projecto.

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'

const opst = {crossDomain: true}


function obtenerUnaPersona (id) {

    return new Promise((resolve, reject)=>{
        const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
        $
        .get(url, opst, function(data){
            resolve(data)
        })
        .fail(()=>reject (id))
    })
}

function onError(id){
    console.log (`Sucedio un error al obtener el personaje ${id}`)
}

obtenerUnaPersona(1)
    .then(function(person){
        console.log(`El personaje 1 es ${person.name}`)
    })
    .catch(onError)

Giovanni Muñoz

student•

perfecto resumen, las promesas también se pueden sincrona es algo posible : )

Jonathan Gonzalez Botero

student•

Muchísimas gracias por tu aporte

Evert Escalante

student•

//promesas

const api_url = 'https://swapi.co/api/';
const character_url = 'people/:id';
const opts = { crossDomain: true};

function getCharacter(id) {

  /*retorna una promesa
  en el constructor de la promesa pasamos una funcion que
  tiene como parametro resolve, y reject */

  return new Promise((resolve, reject) => {
    
    //aqui realizamos el llamado asincrono

    //generamos la url
    const url = `${api_url}${character_url.replace(':id', id)}`
    
    /*hacemos ese request, como tercer parametro le pasamos nuestro
    callback de la respuesta */
    $.get(url, opts, (data) => {

      /*cuando esta funcion se ejecute 
      llamamos a resolve pasandole la data que trae */
      resolve(data)
    })
    //rechazar la promesa en caso de error
    .fail(() => reject(id))
  })
  
}

function onError(id) {
  console.log(`Sucedio un error al obtener el personaje ${id}`)
}

//lamado a la funcion, con el id que nos interesa
getCharacter(2)
/*para obtener  el valor que esperabamos de una promesa podemos llamar
 a then y ahi tendriamos el valor  disponible para nosotros en otra funcion,
 en esta funcion tendremos como parametro nuestro personaje, esa data que nos llega,
 cuando se resuelve esa promesa esta data, es la que nos envia resolve
 */
 .then((data) =>{
  console.log(`El personaje es ${data.name}`)
 })
 /*si sucede algun error a .catch y a este tenemos que pasarle una funcion
 pero en lugar de pasarle el error como parametro le pasamos el llamado a la 
 funcion on error, que tiene como parametro el id  que nos llega desde reject */
 .catch(onError)

sebastian mst

student•

Aquí quiero hacer un gigantesco paréntesis. No me gusta el rumbo que ha tomado el curso, no debería enseñar jquery, debería enseñar Vanilla JS, ya si uno quiere aprende jquery o no, porque aquí deberíamos estar aprendiendo de fetch. Espero una actualización de este curso, porque en serio, me enreda muchísimo además de las arrow functions que ahora entiendo que sí se necesitan (porque son ampliamente usadas), combinarlo con jquery sabiendo que lo no lo usaré desanima bastante.

Héctor Eduardo López Carballo

student•

Hola!

Puedes echarle un vistazo al Curso de Asincronismo con JavaScript, aunque no se ve fetch como tal, se muestra cómo funciona conceptualmente. Los demás cursos también agregan más profundidad.

sebastian mst

student•

Estamos 2021 no 2018 Ismael, y justificar la antiguedad del curso y la necesidad de actualización creo que es demasiado. No me malinterpreten, Sacha es excelente profesor, sus videos de youtube sobre JavaScript son muy buenos, pero si el curso ya tiene más de 2 años, al menos en temas como JavaScript se nota.

Ivan Santiago

student•

Antes se me olvidaba todo el tiempo la sintaxis de las Promises, ya no mas jajaj 😄

Freddy Córdova Arana

student•

Lo mismo digo 😃

Guillermo Loza Hernandez

student•

Para entender las promesas les recomiendo la clase de Leonidas en el curso de jQuery a javaScript. Les dejo el link: https://platzi.com/clases/1316-jquery-js/12289-promesas0723/

Alejo Fonseca

student•

Vengo de ese curso a buscar una explicación mas completa sobre Promesas y creo que Sacha lo explica más completo

Ilán Vivanco

student•

Ambos los abordan un poco diferente. Pero es cierto que el de Sacha es un poco más técnico en su explicación

Juan Pablo Castro

student•

Creo que no era el mejor ejemplo para explicarlo desde 0;

Diego Fernando Rojas Quintero

student•

callback: es una función que es llamada dentro de otra función para poder realizar un proceso de manera sincrona.

Promesas: son valores que no conocemos pero que van a estar disponibles ahora, en el futuro, o nunca. Y son usadas de en los procesos asincronos. Las promesas tienen 3 estados:

pending: pendientes
fullfilled: cumplida
rejected: rechazada

para obtener el valor arrojado de los estados de una promesa: utilizamos dos funciones:

-para el estados fullfilled utilizamos la funcion:

.then(val=&gt;...)

-para el estados fullfilled utilizamos la funcion:

.chact(err=&gt;...)

las promesas pueden ser invocadas de las sigiente manera

newPromise(function(resolve,reject){
	.then(val=&gt;...)
.chact(err=&gt;...)
}

Raul Galicia Abud

student•

La primera mitad del curso se me había hecho entre fácil y moderada, pero desde la parte de Asincronismo y ahora Promesas siento que la dificultad subió bastante.

Así que a seguir estudiando mucho.

Ricardo Caicedo

student•

ya lo sabes a si estaba yo hasta que llegue a los callbacks hay puse mi cerebro al 100 y pude entender mas o menos

Richards Andrés Villanueva Núñez

student•

voy en la mitad del video y temo por mi estabilidad mental en el futuro cercano

Rulo Code

student•

no hay nada más gratificante que entender algo que al principio te hace sangrar el cerebro

Wilkins Bernardo Brito Serrano

student•

les juro que entiendo la explicación, pero si me ponen a hacerlo de tarea no doy pie con bola

Juan Camilo Guerrero González

student•

Hola en ese caso yo te aconsejaría seguir repasando hasta que te quede claro, no te va servir de mucho seguir adelante si no solucionas tus dudas

Emilio Uriel Guerrero López

student•

Promesas: cuando se llaman muchos callbacks el código se vuelve ilegible , para eso se ocupan las promesas.

Pensemos las promesas como valores que aún no conocemos. estas tienen 3 estados: 1.- Estado de pending, esta es cuando se crea 2.- cuando se resuelve pasa al estado de fulfilled 3.- si hay un error se hace rejected

Para obtener el valor podemos: 1.- llamar la función .then, se le pasa como parámetro una función el cual el parámetro es el valor que esperábamos 2.- si hay un error hacemos .catch, se le pasa una función la cual tiene como parámetro el error.

Para crear una promesa:

new Promise(function (resolve, reject){
	...
})

Promesas

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?