Múltiples promesas en paralelo

Clase 39 de 55 • Fundamentos de JavaScript 2018

Resumen

Para hacer el llamado a múltiples promesas, nos apoyamos en un array de ids con el que luego construimos otro arreglo de Promesas, que pasaremos como parámetro a Promise.all( arregloDePromesas ), con las promesas podemos encadenar llamadas en paralelo, algo que no es posible usando callbacks.

Ivan Santiago

student•

Tambien existe el .race que es para poner a competir las Promises, solo se muestra el resolve de la promesa que se termine primero 😄

Freddy Córdova Arana

student•

Eso es del curso 2017 ! 😄

Jorge Delfino

student•

Y del curso “de JQuery a Javascript”

Pablo Andres

student•

Resumen de la Clase
Multiples Requests en Paralelo

Con promises podemos hacer los requests en paralelo sin alterar el orden de los objetos, lo que mejoraría mucho nuestro código y performance.

Generamos un array con los ids de los personajes que queremos obtener. Y a partir de este vamos a generar otro array con múltiples promesas, donde cada elemento sea una promesa, la promesa de obtener un personaje con su id.
Con el método map() vamos a recorrer el array ids y por cada elemento de este vamos a generar uno nuevo que va a ser una promesa.
Estas promesas las guardamos en una variable ‘promesas’. A partir de cada objeto del array ids (de cada id) obtenemos una nueva promesa con la función _obtenerPersonaje(id).
_

var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map(function(id){
    return obtenerPersonaje(id)
})

Expresado en arrow function

var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map( id => obtenerPersonaje(id) )

// (7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]

Cómo obtenemos los valores de estas promesas cuando se resuelvan?

Para esto podemos llamar a un método que tiene la clase de promesas llamado 'Promise.all()'
A este le pasamos el array ‘promesas’, le encadenamos el .then() que nos entrega los objetos y depués encadenamos el .catch() que se va a ejecutar si cualquiera de las promesas que tenemos en el array falla.

Promise
    .all(promesas)
    .then( personajes => console.log(personajes))
    .catch(onError)

// (7) [{...}, {...}, {...}, {...}, {...}, {...}, {...}]
//Si lo desglosamos tenemos en orden las respuestas de cauda una de las promesas.

Las promesas tienen un gran potencial por sobre los callBakc.
El código queda mucho más prolijo y a demás podemos realizar promesas en paralelo.

Código 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}.`)
}

var ids = []
for (let i = 1; i <= 10; i++) {
    ids.push(i)
}
console.log(ids.length)
var promesas = ids.map( id => obtenerPersonaje(id) )

Promise
    .all(promesas)
    .then(personajes => console.log(personajes))
    .catch(onError)

Jerson Morrow

student•

buen resumen !!!

Juan Jiménez

student•

Muy buen resumen, gracias

Ricardo Ayala Montes

student•

para que siga visualizandose los personajes, alguien pregunto como imprimias mil registros o más

var promesas =ids.map(id => obtenerPersonaje(id))
Promise
	.all(promesas)
	.then(personajes => {
		for(i=0; i< personajes.length; i++)
		{
					console.log(personajes[i].name)
		}

	})
	.catch(onErr)```

Evert Escalante

student•

Y en este caso como seria ese array que contiene el id de los personajes ?

Ricardo Ayala Montes

student•

El array es el mismo
var ids = [1,2,3,4,5,6,7]
var promesas =ids.map(id => obtenerPersonaje(id))
en el then se esta enviando los objetos 'personajes’
por eso se esta haciendo el ciclo de cada uno

prueba el console.log(personajes)

Alexander Rayo

student•

Mi ex me dejó un array lleno de promesas :c

Andrés Felipe Lopez gomez

student•

jajajaja

Miguel Angel Reyes Moreno

student•

Por si no lo han visto en comentarios anteriores, en vez de usar console.log para arrays, usen console.table

Edgar Oswaldo Vargas Jara

student•

NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO, por qué nunca habia visto esto?

Miguel Angel Reyes Moreno

student•

Tarde pero seguro @edgarows39

Cristian Bello Cervantes

student•

DEFINITIVAMENTE este es uno de mis cursos favoritos  :

Ulises Uriel Cabrera Rubio

student•

muy bien

Wilmer Jesús Cuevas Perdomo

student•

Nadie: Sascha: "Vamos a convertir esto en arrow function, sera mucho mas facil" Yo: NOOOOOOOOOOOOOOOOOOOOOOOOOOO STOP

Pienso que es mucho menos legible, ¿tienen alguna utilidad aparte de complicar mas las cosas?

Ignacio Saccomano

student•

Mmm a mí se me hace sencillo. Es además en cierta manera satisfactorio porque las expresiones son más cortas. Algunas funciones cortas por ejemplo pueden declararse así. Además las funciones anónimas que se declaran dentro de otras funciones (como map o find) son más prolijas siendo arrow functions. Sino poner explicitamente la palabra function siempre es medio redundante y se vuelve un poco largo el código.

Jose Ayarza

student•

Todo depende del programador de como se sienta comodo de hacer las funciones en Javascript.

JoséAngel Sánchez

student•

Este link tiene casi todo sobre promesas, enormemente detallado. https://hackernoon.com/understanding-promises-in-javascript-13d99df067c1

David Edson González Carrillo

student•

Este post les puede servir https://platzi.com/blog/que-es-y-como-funcionan-las-promesas-en-javascript/

Aaron Felipe Isaacs

student•

Excelentw

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

const obtenerPersoaje = (id) => {
  return new Promise((resolve, reject) => {
    const url = `${API_URL}${PEOPLE_URL}${id}`
    $.get(url, {}, (data) => resolve(data))
    .fail(() => reject(id))
  })
}

let ids = [1, 2, 3, 4, 5, 6, 7]
let promesas = ids.map(id => obtenerPersoaje(id))

Promise
.all(promesas)
.then(personajes => personajes.forEach( (personaje, index) => console.log(`Hola, soy el personaje ${index} y mi nombre es ${personaje.name}`) ))
.catch(error => console.log(error))

Ariel Alejandro Ureña Morales

student•

Sí, cada vez está más legible. Ahora sólo queda practicar todo esto.

const API_URL = 'https://pokeapi.co/api/v2/'
const POKEMON_URL = 'pokemon/:id'
const opts = {crossDomain: true}

function obtenerPoke(id){
    return new Promise((resolve,reject)=&gt;{
        const url = `${API_URL}${POKEMON_URL.replace(':id',id)}`
        $
        .get(url, opts, function(data){
            resolve(data)
        }) 
        .fail(() =&gt; reject(id))
    })
}

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

var ids = [1,4,7,10,13,16,19]
/*var promesas = ids.map(function (id){
    return obtenerPoke(id)
})*/
var promesas = ids.map(id=&gt;obtenerPoke(id))
Promise
    .all(promesas)
    .then(pokes =&gt; console.log(pokes))
    .catch(onError)

ANGEL DAVID SULBARAN CALDERON

student•

MULTIPLES PROMESAS EN PARALELO Para esto realizaremos un array, comentaremos la cadena que hicimos la clase pasada y pasamos a hacer esto:


var ids = [1, 2, 3, 4]

var personas = ids.map(id=>obtenerUnaPersona(id))
Promise
    .all(personas)
    .then(personajes => console.log(personajes))
    .catch(onError)

Aca explicamos este código, poco a poco, como podemos ver, terminamos creando un array con los id de los personajes que queremos;

var ids = [1, 2, 3, 4]

Y luego generamos un array con multiples promesas, usando la funcion de los arrays map, que sirve para tomar un array y modificar cada uno de sus elementos, eso es básicamente lo que hacemos, recorrer el array y retornar por cada uno de sus elementos una nueva promesa. Esas promesas las guardamos en otra variable var personas = ids.map(id=>obtenerUnaPersona(id)) de esta manera estamos haciendo los request de la data al servidor de manera mas sencilla y corta, haciendo que la arrow function nos retorne la data a que queremos a una nueva persona, con esto creamos un array de promesas y podemos trabajar con ellas en paralelo. De esta clase lo que debemos llevarnos es el uso de los arrays y el método de las promises el cual es;

Promise
    .all(personas)

Que dentro de en colocaremos un array de promesas y con esto las encadenamos luego con un .then

 .then(personajes => console.log(personajes))

Y en el punto then vamos a tener un array con los valores de cada una de las promesas por lo que hay que crear una función, que utilice este array, en este caso solo usamos un console.log, para que nos muestre dicho array y lo llamamos personajes y por ultimo pero no menos importante el .catch que es en caso de que hayamos recibido respuesta del servidor en algún punto.

Luis Alejandro Vera Hernandez

student•

Gracias por el resumen!

jose zuñiga

student•

Dejo el código en Vanilla JS:

//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){
                //La información llega en un archivo JSON hay que cambiarlo a objeto
                //para trabajar con el de manera mas facil
                let personaje = JSON.parse(this.responseText)
                resolve(personaje)
            }else{               
                reject(id)
            }            
        }
        objRequest.send()
        
    })
}

function onError(id){
    console.log(`Ha ocurrido un error en el id ${id}`)
}

var ids = [1,2,3,4]
var promesas = ids.map((id) => getData(id))
Promise.all(promesas)
    .then(personaje => {
        //Para saludar cada personaje hagp un ciclo for
        for(var i = 0; i < promesas.length; i++){
            console.log(`Mi nombre es ${personaje[i].name}`)
        }        
    }).catch(onError)

Bernardo Aguayo Ortega

student•

gracias bro

José Carlos Vielman Mallada

student•

Muy bueno tu código. He visto que en este ejercicio no se guardaba en ningún lado y aquí encuentro el código donde guardamos los personajes.Sólo que yo quería hacerlo con jquery pero así esta mejor

Matias Cariboni

student•

Caso inusual, por si les pasa a ustedes.

En caso de que intenten ejecutar este código con el id 17. TENDRÁN UN ERROR. Al menos al momento de este comentario la api carece de información en la posición 17 y javascript les devolverá el error 'uncaught exception: 17' Pruébenlo por ustedes mismos agregando el ID 17 al array. Me costó mucho encontrar el error en mi código...y ahora que descubrí que el error no es mío. Lo comparto con ustedes. Buen estudio a todos.

Bernardo Aguayo Ortega

student•

gracias bro

Pamela Cinthya Torres Gutiérrez

student•

woow extraordinaria clase.

comparto mis notas.

José Agustin Rios

student•

Gracias

Andi Antopher

student•

Apuntes de la clase

/*
Para hacer el llamado a múltiples promesas, nos apoyamos en un array de ids con el que luego 
construimos otro arreglo de Promesas, que pasaremos como parámetro a Promise.all( arregloDePromesas ),
 con las promesas podemos encadenar llamadas en paralelo, algo que no es posible usando callbacks.
*/

//Variables constantes que hacen referencias a las strings de trabajo
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
//Le indica a la librería que el request se hará a otra página web
const opts = { crossDomain: true }


//Se modifico función de clase anterior para manejar promesas
function obtenerPersonaje(id) {

    //Se deben enviar funciones en el constructor de las Promesas las funciones que manejaran los estados de la misma
    //En este caso resolve y reject
    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(`No se pudo obtener respuesta para personaje ${id}`)
}

//##################################################################################
//Para hacer un llamado a múltiples promesas en paralelo, debemos emplear un arreglo
//Se generará un nuevo array, con las nuevas promesas
//Se modificará el arreglo usando map

var ids = [1, 2, 3, 4, 5, 6, 7]

//Si se espera un return, no es necesario escribirlo usando arrow functions

//En está línea el método map de los arreglos, crea un nuevo arreglo a partir del existente,
// enviando como parámetro de la función cada uno de los id contenidos en el arreglo original.
var promesas = ids.map( id =>  obtenerPersonaje(id))

//Encadenamiento de Promise (promesas)
Promise
.all(promesas)
.then (personajes => console.log(personajes))
.catch(onError)


//Forma alternativa de escribirlo

// var promesas = ids.map(function (id){
//     return obtenerPersonaje(id)
// })

//Ejemplo de promesas encadenadas
//Manejo de la promesa para obtener el resultado de la petición

// obtenerPersonaje(1)
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//         return obtenerPersonaje(2)
//     })
//     //Ejemplo de encadenamiento, después del return, la función .then se encadena
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//         return obtenerPersonaje(3)
//     })
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//         return obtenerPersonaje(4)
//     })
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//         return obtenerPersonaje(5)
//     })
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//         return obtenerPersonaje(6)
//     })
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//         return obtenerPersonaje(7)
//     })
//     .then( person => {
//         console.log(`El personaje es: ${person.name}`)
//     })
//     //Se puede enviar una función por referencia y de esta manera no es necesario llamarla
//     //El catch reacciona contra cualquier promesa
//     .catch(onError)

Manuel Carlos Sandoval

student•

muy buenos apuntes, me diste ideas para reforzar los míos!

Juan David Gustin Andino

student•

¡Gracias! <3

Harold Jara

student•

Buenas tardes estoy realizado el curso y me muestra al realizar el console.log(personajes) en consola me muestra undefined!

Juan David Avila Caycedo

company_admin•

Como es tu codigo ? esto puede estar pasando por varias razones muy diversas, no quiero confundirte con esos posibles errores asi que para entender el error lo ideal es que compartas el codigo o las parte implicada en el funcionamiento de lo que buscas

Juan David Avila Caycedo

company_admin•

Si colocaste

Promise
	.all(promesas)
	.then(personajes => console.log(personajes))
	.catch(onError)

y no tienes un Typo (un error por una palabra reservada o variable mal escrita) el resultado deberia ser "Sucedio un error al obtener el personaje ", pero si no te esta saliendo eso y tampoco el resultado esperado entonces es algun typo, aunque para estar más seguro deberia ver tu codigo

Jesús maldonado

student•

como es el atajo para comentar el código en vscode

David Santiago Diaz

student•

Hola 😀 Para comentar el codigo tienes que presionar ctrl + k + c y para descomentarlo seria ctrl + k + u.

Espero que sea de tu ayuda. 😉

Jhonny Córdova

student•

En VS Code, al presionar ctrl + k + s abres los "Keyboard Shortcuts". Ahí puedes ver que combinación de teclas se usan para cualquier cosa.

Por defecto para comentar es: ctrl + k + c.

Saludos

Brayhan Andres Jaramillo Castaño

student•

Esta manera es la mejor para implementarla.

Cesar Israel Aguilar Carrera

student•

Me voló la cabeza esta clase

Múltiples promesas en paralelo

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?