Promesas Encadenadas

Clase 38 de 55 • Fundamentos de JavaScript 2018

Resumen

A diferencia de los callbacks en el CallbackHell, que terminan estando anidados unos dentro de otros, cuando se usan Promesas la ejecución de las llamadas no se hacen de manera anidada sino de manera encadenada, al mismo nivel una debajo de la otra, lo que hace que el código sea mucho más legible y mantenible.

erick blanco

student•

y si quiero hacer el llamado de 2 mil personajes? veo poco practico escribir dos mil veces las promesas, ahi puedo usar un if? o un ciclo? o como se puede resolver?

Victor Cerriteño

student•

si lo mas eficiente dadas esta herramientas es que usaras un ciclo y que cada iteracion se ejecutara encuanto recibes una respuesta

Diego Forero

Team Platzi•

Puedes usar una promesa que llame a un API externa que retorna el nombre de los personajes, una vez tienes el listado puedes iterar sobre este listado.

Pablo Andres

student•

Resumen de la clase:
Encadenar Promesas

Encadenar promesas es mucho más limpio que con el método anterior.
Primero escribimos la invocación de la promesa con un arrow function:

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

Al resolver esta promesa vamos a retornar otra promesa invocando dentro del .then nuevamente la función obtenerPersona() con el id del siguiente personaje:

obtenerPersonaje(1)
    .then( personaje => {
        console.log(personaje.name)
        return obtenerPersona(2)
    })
    .catch(onError)

Y para obtener los valores de esta promesa encadenamos otro .then y copiamos la función parámetro cambiando el valor del id.

obtenerPersonaje(1)                                                                                                                                                            
    .then( personaje1 => {
        console.log(personaje1.name)
        return obtenerPersona(2)
    })
    .then( personaje2 => {
        console.log(personaje2.name)
        return obtenerPersona(3)
    })
    .then( personaje3 => {
        console.log(personaje3.name)                                                                    
        return obtenerPersona(4)
    })
    .
    .
    .
    .catch(onError)

Ahora es mucho más legible y si cualquiera de estas promesas da un error funciona el mismo .catch para todos.

Rodrigo Oswaldo Hernandez Gonzalez

student•

Gracias

Britney Hadassa Ascencio Henriquez

student•

Thanks

Wilmer David Cedeño Mendoza

student•

La recursividad es la clave, legible y fácil de usar

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

const OPTS = { crossDomain: true}

function obtenerPersonaje(id, cantidad){

	return new Promise((resolve, reject) =>{
		const url = `${API_URL}${PEOPLE.replace(':id',id)}`
		$.get(url, OPTS, function(data){
			resolve(data)
		})
		.fail(() =>	reject(id))
	})
	.then((personaje) => {
		console.log(`El personaje es ${personaje.name}`)
		if(cantidad > 1)
			return obtenerPersonaje(id+1, cantidad-1)
	})
	.catch((id) => console.log (`Sucedio un error al obtener el personaje ${id}`))

}

Y se llama así para ver 10 personajes y empezar con el primero

obtenerPersonaje(1, 10)

Oriol Fernando Palacios Durand

student•

Estaba buscando una solución para poner los nombres en orden ya que logré construir un for para generarlos pero se ponían todos en desorden y encontré esto. Está genial el código me ayudó bastante!!

Luis Santiago Sucerquia Londoño

student•

Una forma de hacerlo en jasvascript, con async await.

const API_URL_PEOPLE = 'https://swapi.co/api/people/'

async function personajes(idPersonaje){
    let id=idPersonaje
    let response = await fetch(API_URL_PEOPLE+id)
    let data = await response.json()
    let nombre = data.name
    return nombre
}

let tamanoArray = 10
let id = 1

async function run(id){
    while (id <= tamanoArray) {
        let personaje = await personajes(id)
        console.log ('El personaje es: ', personaje)
        id++
    }
}
run(id)

Y te imprime el siguiente resultado:
El personaje es: Luke Skywalker
El personaje es: C-3PO
El personaje es: R2-D2
El personaje es: Darth Vader
El personaje es: Leia Organa
El personaje es: Owen Lars
El personaje es: Beru Whitesun lars
El personaje es: R5-D4
El personaje es: Biggs Darklighter
El personaje es: Obi-Wan Kenobi

Victor Andres Castillo Zambrano

student•

gracias

Andrés Gutierrez

student•

para abreviar el código podemos usar un ciclo, eso nos ahorra el copiar y pegar


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

var URL= ''
const opts= { crossdomain: true}
function getCharacter(id, promise)
{
    return new Promise(function(resolve, reject)
    {
        URL= `${API_URL}${people_url.replace(':id', id)}`
        $.get(URL, opts, (data)=> resolve(data))
        .fail(() => reject(id))
    })
}
for(i= 1; i<= 5; i++)
{
    getCharacter(i)

    .then(function ({name}){
        console.log(`el personaje es ${name}`)
        return getCharacter(i+1)
    }).catch(()=>console.log('error 404 not found'))

}```

Jesus Manuel Hernandez Diaz

student•

En esto mismo estaba pensando yo si se podia hacer.

Aldo Said Salas Rodríguez

student•

¿Por qué en la función getCharacter pones como parámetro promise si nunca lo usas? También el problema que tengo es que los nombres no se muestran en orden en la consola.

Stiven Jiménez

student•

aquí les dejo documentación que me ayudó a entender más sobre las promesas y cómo encadenarlas https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Usar_promesas#Encadenamiento

Adrian Salgado

student•

Gracias, también estuve un poco perdido.

Leonardo Buezo

student•

excelente!! gracias por compartirlo, me sirvió mucho para entender mejor este concepto.

Sebastian Gonzalez

student•

Hola, tengo una duda, intente hacer las promesas en un for y "aparentemente" funciona bien pero no se si hay algo mal, gracias por su feedback. Lo otro que noto es que de esta forma es mucha mas rapida la ejecución en la consola que de la forma del video, ¿a que se debe esto como tal?

for (let i = 1; i <= 7; i++) {
    obtenerPersonaje(i)
    .then(personaje => {
        console.log(`El personaje ${i} es ${personaje.name}`)
    })
    .catch(onError)
}

Edgar Ramón González Contreras

student•

Si no te muestra ningún error, significa que no hay nada "malo" con el código.

Por cierto, la velocidad de ejecución de algunos métodos o programas varia mucho de la computadora que uses. Es normal.

Sebastian Gonzalez

student•

Ok Edgar, gracias

Emanuel Valero

student•

En el blog de platzi encontré este artículo, que ayuda a entender mejor que son y cómo funcionan la promesas en Javascript: https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/

Javier Romero

student•

ya quede loco, la verdad no entiendo nada de asincronismo ¿de pronto alguna sugerencia para aprenderlo de manera mas sencilla?

Efraín Hernández García

student•

Te recomiendo mucho ver esta serie de videos: Empieza por este: https://www.youtube.com/watch?v=PndHsDpEfhU&t=36s

jose zuñiga

student•

Antes de ver la lista de reproducción que sugiere Efrain te recomiendo este video del mismo creador. Es vital entender el callstack, este es el corazón de JS y a su vez el enredo que nos causa el a sincronismo.

https://www.youtube.com/watch?v=FzFFTYbYvcw&t=635s

Daniel Cabrera Ramirez

student•

los metodos .then & .catch son como un if & else, ahora si logre entender las promesas tienen un constructor con los parámetros "resolve & reject" y despues sus metodos que funcionan a modo de posibles condicionales

Nestor Beltran

student•

no, es mas como el try catch de java

jose zuñiga

student•

Código de la clase en Vanilla JS por si lo desean analizar:

//const urlApi = 'https://swapi.dev/api/';
//const character = 'people/:id';
const urlApi = 'https://rickandmortyapi.com/api/character/'
const character = ':id';

function getData(id){    
    //La promesa se debe definir antes de la estructura request de la funcion
    return new Promise(function(resolve, reject){
        var url = `${urlApi}${character.replace(':id',id)}`;
        //Defino un objeto que sirve para contener o recibir la informacion 
        //del servidor
        var objRequest = new XMLHttpRequest;
        //Defino el tipo de request como get, la url del servidor y que sera
        //una comunicación asincrona = true
        objRequest.open('GET', url, true)
        //Hacer la petición al servidor, .onload es el callback cuando se hace 
        //la petición request al servidor. Tambien podemos usar .onreadystatechange
        //objRequest.onreadystatechange = function(){
        objRequest.onload = function(){
            if(this.readyState == 4 && this.status == 200){
                let personaje = JSON.parse(this.responseText)
                resolve(personaje)
            }else if(this.readyState == 4 && this.status == 200){
                console.log(id)
                reject(id)
            }            
        }
        objRequest.send()
    })
}

getData(1).then((data)=>{
    console.log(`Hola soy ${data.name}`)
    return getData(2)
}).then((data)=>{
    console.log(`Hola soy ${data.name}`)
    return getData(3)
}).then((data)=>{
    console.log(`Hola soy ${data.name}`)
    return getData(4)
}).then((data)=>{
    console.log(`Hola soy ${data.name}`)
}).catch((id)=>
    console.log(`Ocurrio un error al llamar el id ${id}`)
)

Bernardo Aguayo Ortega

student•

Esta genial, gracias

Jesus Gallardo

student•

** Cuando al fin entiendes las promesas y el poder de Javascript y sientes que eres tan poderoso que tu cerebro explotara **

Pamela Cinthya Torres Gutiérrez

student•

Muy buena clase y ahora me queda un poco mejor entendido esto de las promesas porque la verdad si he batallado mucho, espero que con la practica esto sea mucho más facil.

Óscar Castañeda

student•

Señor Sacha ¿No los está llevando por camino más difícil?

fetch(url)
  .then(res => res.json())
  .then(json => {
    const characters = json.results;
    characters.map(character => {
      console.log(character.name);
    });
  })
  .catch(err => console.log(err));

Diana Yazmin

student•

Nos enseña la forma 'difícil' para que podamos entender mejor la forma fácil.

Andrus Diaz

student•

.catch para todos que genial :)

Jhon Paul Montoya Rodriguez

student•

Esto es muy fácil o el profe es muy bueno?

Sebastián Pineda Duque

student•

¿Quiere decir que los Callbacks están en desuso?

Eduardo Hidalgo Díaz Rugama

student•

No exactamente, pero si. En resumen: una promesa es un callback con esteroides.

cita textual:

Promises are more than just callbacks. They are a very mighty abstraction, allow cleaner and better, functional code with less error-prone boilerplate.

Callbacks es un tema de asincronismo, y promesas también. las promesas surgen como una solución a problemas que presentan los callbacks.

Es un poco más de código en una promesa, pero tiene mayor legibilidad.
Es mucho más fácil reensamblar un código asíncrono con promesas y seguir el rumbo de los llamados
Es absurdamente más fácil detectar errores, véase:

api().then(function(result){
    return api2();
}).then(function(result2){
    return api3();
}).then(function(result3){
     // hacer algo
}).catch(function(error) {
     //manejar cualquier error que haya sucedido hasta este punto
});

Se pone mejor, ¿Qué pasa si quieres correr 3 llamadas asíncronas al mismo tiempo, pero tienes que esperar el resultado de las 3? Con callbacks tendrías que hacer como un especie de contador, algo super weird. Con promesas usas esta belleza y vualá:

Promise.all([api(), api2(), api3()]).then(function(result) {
    //llega aquí en cuanto el array contenga todas las respuestas de las promesas
}).catch(function(error) {
    //maneja el error en caso que alguna de las promesas haya fallado
});

Carlos Enrique Ramírez Flores

student•

@EduardoHidalgo => excelente respuesta. Gracias!

Daniel Páez

student•

IDEAS CLAVES

=> Podemos encadenar promesas ejecutando una funcion request con la
primera promesa
* retornando otra funcion con la siguiente promesa que queremos ejecutar
* encadenando con .this
* Y asi sucesivamente
hasta llegar al catch error

=> Las funciones pueden funcionar de manera asincrona y sincrona

Noe de Jesus Muñoz Martinez

student•

Buena clase.

Luis David López Berber

student•

Excelente observación

mgl Brv

student•

¿Porqué Sacha no usó Fetch API en vez de jQuery para hacer la consulta a la SWAPI? Comparto el código del este ejercicio con Fetch

function getCharacter (id) {
  return fetch(`https://swapi.co/api/people/${id}/`)
    .then( response => response.json())
    .catch(error => console.error(`Se produjo un error al obtener el personaje ${id}`))
  }
  
  getCharacter(1)
  .then( (character) => {
    console.log(character.name)
    return getCharacter(2)
  })
  .then( (character) => {
    console.log(character.name)
    return getCharacter(3)
  })
  .then( (character) => {
    console.log(character.name)
    return getCharacter(4)
  })
  .then( (character) => {
    console.log(character.name)
    return getCharacter(5)
  })
  .then( (character) => {
    console.log(character.name)
  })
// Acá returno null para que no aparezca otro mensaje de error. Solo mostrará el de Fetch
  .catch(error => null)

Andrés Garzón Vesga

student•

Quizá porque de esa manera no llegan los resultados en el orden que los pedimos.

Promesas Encadenadas

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?