Introducción al curso

1

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

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

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

No tienes acceso a esta clase

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

Múltiples promesas en paralelo

39/55
Recursos

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.

Aportes 245

Preguntas 45

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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)

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

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

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

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

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)=>{
        const url = `${API_URL}${POKEMON_URL.replace(':id',id)}`
        $
        .get(url, opts, function(data){
            resolve(data)
        }) 
        .fail(() => 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=>obtenerPoke(id))
Promise
    .all(promesas)
    .then(pokes => console.log(pokes))
    .catch(onError)

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.

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)

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.

woow extraordinaria clase.

comparto mis notas.

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)

Esta manera es la mejor para implementarla.

Me voló la cabeza esta clase

Me están encantando estas clases :’)

Con base en el arreglo promesas, podemos extraer todos los actores, y de cada actor su nombre:

Ok hasta ahora Cerebro Frito con los CallBacks…
Pero cada vez se entiende mejor =D

Para imprimir el nombre de cada uno de los personajes y no un array con todos los personajes juntos, solo deben crear una funcion que lo haga, y luego pasarla como parametro al .then de Promise.all()


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

const imprimirNombres = personas => {
    personas.map( persona => {
        let temp = personas.indexOf(persona) + 1
        return console.log(`El personaje ${temp} es ${persona.name}`)
    } )
}

Promise
    .all(promesas)
    .then(imprimirNombres )
    .catch(onError)

Excelente, no conocía Promise.all(), es genial!!

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

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

function onError(id) {
    console.log(`El id ${id} no se pudo obtener`)
}

var ids = [1,2,3,4,5,6,7,8,9]
var promises = ids.map (id => getCharacter(id))

Promise
    .all(promises)
    .then( resp => {
        resp.forEach(element => {
            console.log(`Hola yo soy ${element.name}`)
        })
    })
    .catch( onError )

para buscar la cantidad de personajes que quieran

characters = []

const promises = () => {
  for(i = 1; i < 17; i++){
    characters.push(obtenerPersonaje(i));
  }
}

promises();
console.log(characters);

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

Ahi va mi codigo, le agregue un for que recorra el array recibido para mostrar por pantalla los datos, todo comentado para que se entienda.

//las promesas son valores que todavia no estan ahi. tienen 3 estados
//pending (pendiente)
//fullfiled (completa/exitosa)
//rejected(rechazada)
//una vez que recibimos el fullfiled, podemos llamar a .then para indicar que hacer
//si tenemos un error, podemos llamar a .catch para capturar el error
const API_URL = 'https://rickandmortyapi.com/api';
const PEOPLE_URL = 'character/:id';
const opts = '{crossDomain:true}';
//en la funcion que obtinene los datos, vamos a retornar una nueva promesa, a la que pasamos dos funciones
//como parametros: resolve y reject
function obtainCharacter(id) {
    return new Promise((resolve,reject)=> {
    const url = `${API_URL}/${PEOPLE_URL.replace(":id",id)}`;
    $.get(url,opts,function(character) {
        resolve(character);
    })
    //si el .get falla, llamamos al .fail para que rechace la promesa con el ID que no se resolvio
    .fail(()=>reject(id));
    })}

//declaramos la funcion onError para el manejo de errores
function onError(id){
    console.log(`No se pudo obtener el personaje id: ${id}`);
}
//promesas en paralelo
//vamos a guardar en un array los personajes que queremos traer
var ids = [1,2,3,4,5]
//luego, vamos a guardar en otro array las promesas de obtener el personaje con los ids
//vamos a usar el metodo map de los array para esto.
/*var promesas = ids.map(function(id){
    return obtainCharacter(id)
})*/
//escrita como arrow function
var promesas = ids.map(id => obtainCharacter(id));
//una vez que se resuelvan, podemos obtener los valores de las promesas con Promise.all()
//metodo de la clase Promise
Promise
.all(promesas) //y luego lo encadenamos con un .then en el que indicaremos que hacer con los valores recibidos
.then(function(character){ //si se resuelve exitosamente
//vamos a usar un for para recorrer el array character, que contiene los datos para mostrar por consola y pantalla
    for (let i = 0; i < promesas.length; i++) {
        console.log(`${character[i].name}`);
        document.write(`<img src="${character[i].image}">`); 
    }
    })
.catch(onError)// si hay algun error, usamos el .catch para llamar a la funcion onError```

En este punto nos damos cuenta la gran importancia de las funciones que tiene JS, por ejemplo el de map(). De igual manera nos damos cuenta lo importante que es usar las arrow function para tener un código más limpio.

Aca dejo mi codigo… logre hacerlo con for, sin embargo el API devuelve error en el numero 17 y eso trunca toda la convocatoria (osea, hasta 16 corre bien)

let API_URL = `https://swapi.dev/api/`
let PEOPLE_URL = `people/:id`

let opts = {crossDomain: true}

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

        .fail(function(){ 
            reject(id)
        })
    })
}


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

}

let ids=[]

for (i=0;i<16;i++){
    ids[i] = i+1
}

let promesas = ids.map(id => obtenerPersonaje(id))
Promise.all(promesas)
.then(result => {
    for (i=0;i<result.length;i++){
    console.log (`${result[i].id} Hola yo soy ${result[i].data.name} naci el ${result[i].data.birth_year}` )
    }
})

.catch(onError)
const URL ='https://swapi.co/api/people/:id';

function obtenerPersonajeid(ids){
   let id = ids;
    return new Promise((resolve, reject) => {
      fetch(`${URL.replace(':id', id)}`)
      .then( response => resolve(response.json())) 
      .catch(err => {  
        var error = `${err} Reference id #${id}`;
        reject(error);
      })
    })
}

var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
var promesas = ids.map(ids => obtenerPersonajeid(ids));

Promise
.all( promesas )
 .then( Personaje => {
    Personaje.forEach((personaje, index) => {
      console.log(`EL PERSONAJE ${index + 1} ES: ${personaje.name}`);
    })
 })
 .catch( error => {
   console.log(`HA OCURRIDO UN ERROR -> ${error}`);
 });  

Este método nos permite llamar a múltiples promesas en paralelo, lo que resulta en una ejecución más rápida y eficiente respecto al encadenado, a su vez mantenemos el orden en que recibimos los resultados.
.
Lo primero es construir un array con la referencia que nos permitirá buscar los datos deseados, con array.map() se itera sus elementos utilizándolos para invocar la función que devuelve las promesas que obtendrán cada personaje, así se obtiene un nuevo array pero de promesas. Éste se procesa con el método Promise.all(iterable) el cual devuelve una promesa que se resuelve correctamente (estado fulfill) cuando todas las promesas en el argumento iterable (el array) han sido concluidas con éxito, o bien rechaza la petición con el motivo pasado por la primer promesa que fuere rechazada.
.
Al resolverse la promesa devuelta por Promise.all() se le encadena el handler .then() que será ejecutado pasándole como parámetro un array de los resultados devueltos por cada promesa.
.
La parte del código nueva respecto a como se venía desarrollando el curso es el siguiente (en este caso tiene un foreach para seguir imprimiendo los nombres de los personajes):

let promesas = idPersonajes.map(id => obtenerPersonaje(id))
Promise
  .all(promesas)
  .then(personajes =>
    personajes.forEach(personaje => 
      console.log(`El nombre del personaje es ${personaje.name}`)
    )
  )
  .catch(onError)```

He reescrito el código con class para que no olvidemos lo anterior dado

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

class SWPersonaje {
    constructor() {
        this.data = {}
    }

    getData(id) {
        return new Promise((resolve, reject) => {
            const opts = { crossDomain: true };
            const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;
            $.get(url, opts, data => {
                resolve(data);
            })
                .fail(() => reject(id));
        });
    };
    onError(id) {
        console.log(`Sucedió un error al obtener el personaje ${id}`);
    }
};


var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9];
swdata = new SWPersonaje();
var promises = ids.map(id => swdata.getData(id));
Promise
    // data en el then llega del resolve del promise
    // el id en el catch llega del reject promise
    .all(promises)
    .then(data => console.log(data))
    .catch(swdata.onError);


Buenas tardes, cómo estan?
Una consulta… solo tengo una duda con la clase, cuando se genera el array con los datos de los personajes ¿cómo puedo acceder a esos datos? veo que estan en promesas en un objeto value, pero nada que me da para acceder a los valores. alguna recomendación?
Gracias

Excelente clase, me gusto mucho, a poner en práctica lo aprendido

  let ids = [1, 2, 3, 4, 5, 6, 7]
  let promesas = ids.map(id => 
  	 obtenerPersonaje(id)
  )
  Promise
  	.all(promesas)
  	.then(personajes => {
  		for(let personaje of personajes){
  			console.log(`Hola, yo soy ${personaje.name}`)
  		}
  	})
  	.catch(error => console.log(error))

aun mas practico!

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

var promesas = ids.map(id => obtenerPersonaje(id))

Promise
.all(promesas)
.then(personajes => {
for (let i = 0; i < personajes.length; i++) {
console.log(personajes[i].name)
}
})
.catch(onError)

Es bueno conocer todas las formas de realizar código.

Darth Vader pesa 136 kg? 😮

Que sarpado viejo, quedo super simplificado el codigo.

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

const options = { crossDomain:true }
const onResponse = data => console.log(data);
const onError = id=>console.log(`Ocurrio un error ${id}`)

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

let promesas = [1,2,3,4,5,6,7].map((elem)=>obtenerPersonaje(elem));

Promise
    .all(promesas)
    .then(onResponse)
    .catch(onError)

**A partir del array grupo inicial, el siguiente código crea el mismo grupo pero con edades cinco años por encima.
**

const grupo = [
    { nombre: 'Pedro', edad: 59 },
    { nombre: 'Lucas', edad: 63 },
    { nombre: 'Ciro', edad: 65 }
]

function crearGrupo(item) {
    return new Promise((resolve) => {
    for (var i=0; i<=2; i++) {
    grupo[i].edad = grupo[i].edad + 5}
    resolve(grupo) }
    )
}

var items = [0]

var promesas = items.map(item => crearGrupo(item), edad)
Promise.all(promesas)
       .then(grupoConMasEdad => console.log(grupoConMasEdad))

Output en la consola:

[Array(3)]
0: Array(3)
0: {nombre: “Pedro”, edad: 64}
1: {nombre: “Lucas”, edad: 68}
2: {nombre: “Ciro”, edad: 70}
length: 3
proto: Array(0)
length: 1__proto__: Array(0)

Esto se esta volviendo mas interesante y cool

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

const getCharacter=(id) => new Promise((resolve, rejected)=>{
    fetch(`${URL}${PEOPLE_URL.replace(':id',id)}`)
    .then((response)=>resolve(response.json()))
    .catch(() => rejected(id))
})
const onError=(id)=>{
    console.log(`Hubo un error con el personaje ${id}`)
}
let ids= [1, 2, 3, 4, 5,6 ,7]
let promesas= ids.map((id)=>getCharacter(id))
Promise.all(promesas)
.then(character=> console.log(character))

Las promesas tienen un gran potencial sobre los callbacks, podemos encadenarlas en paralelo, que con los callbacks no puede hacerse fácilmente.

Excelente explicación, muy sencillo y visualmente muy didáctico.

He revisado este tema muchas veces porque siempre me quedaban dudas, pero hoy quedaron resuletas de forma definitiva

La verdad super interesante, pero cuesta un poco asimilarlo… Si recomiendan alguna lectura seria genial

Acá dejo mi código, las promesas contenidas en el array promesas lo pase como parámetro a una función que imprime por consola los nombre y la altura.

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(`Sucedió un error al obtener el personaje ${id}`)
}


var ids = []

for (let i = 1; ids.length <= 15; i++) {
    ids.push(i)

}
// var promesas = ids.map(function (id) {
//   return obtenerPersonaje(id)
// })
var promesas = ids.map(id => obtenerPersonaje(id)) //esto es un array lleno de promesas
Promise
    .all(promesas) //si se resuelve la promesa
    .then(personajes => character(personajes)) //El Array lo paso por parametro a la funcion character
    .catch(onError) //si sucede algun error de cualquiera de las promesas falla```



function character(player) { //aca recibo el array 

    for (let i = 0; i < player.length; i++) {
        console.log(`Me llamo ${player[i].name} y mido ${player[i].height} cm`)

    }
    // console.log(player[0].name) //EN esta sentencia acceso de las distintas promesas y sus atributos

}

falto imprimir el nombre

var promesas = ids.map(id=> obtenerPersonaje(id) )
Promise
    .all(promesas)
    .then(personajes => personajes.map(personaje => console.log(`hola yo soy ${personaje.name}`)))
    .catch(onError)
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, (data) => {
            resolve(data)
        })
        .fail(() => reject(id))
    })

}


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

var promesas = ids.map( id => obtenerPersonaje(id))
Promise
.all(promesas)
.then(personajes => {
    personajes.map(Element => {
        console.log(`Hola yo soy ${Element.name}`)
        
    })
})

Muy facil de entender

Si tal vez a alguno le aparece que promise.all no esta definido y les da error el problema es que la p tiene que ser en mayuscula “Promise.all”

Ahora si se logra explotar el tema del paralelismo 😮

const URL_API = 'https://swapi.co/api/';
const URL_PEOPLE = 'people/:id';
const OPTIONS = { crossDomain: true };

function personaje(id) {
	
	return new Promise((resolve, reject) =>{
		const url = `${URL_API}${URL_PEOPLE.replace(':id', id)}`
		$
    	.get(url, OPTIONS, (data)=>{
    		resolve(data)
    	})
    	.fail(() => reject(id))
	})
    	
}

function onError(id){
	console.log(`Sucedio un error, no se pudo obtener el parametro ${id}`)
}

const ids = []

for (let i = 1; i <= 7; i++) {
	ids.push(i)
}

let promesas = ids.map(id => personaje(id))
Promise
	.all(promesas)
	.then(personajes => console.log(personajes))
	.catch(onError)
<clase34.js>
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const opts = { cossDomain: true }

//alert('activo');
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(`ups un error!! El personaje correcto es ${id}`);
}

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


var personas = ids.map(id => obtenerPersonaje(id))
Promise
     .all(personas)
     .then(personajes => console.log(personajes))
     .catch(onError)
//obtenerPersonaje(1)
   //.then(personaje1=>{
    // console.log(`El personaje 1 es ${personaje1.name}`)
    // return obtenerPersonaje(2)
  // })
  //.then(personaje2=>{
      //  console.log(`El personaje 2 es ${personaje2.name}`)
      //  return obtenerPersonaje(3)
    //  })
  //.then(personaje3=>{
    // console.log(`El personaje 3 es ${personaje3.name}`)
  //  return obtenerPersonaje(4)
  //       })
//  .then(personaje4=>{
  //  console.log(`El personaje 4 es ${personaje4.name}`)
          // return obtenerPersonaje(5)
            //    })
  //  .then(personaje5=>{
    //  console.log(`El personaje 5 es ${personaje5.name}`)
      // return obtenerPersonaje(6)
          //           })
      // .then(personaje7=>{
      //  console.log(`El personaje 6 es ${personaje7.name}`)
                //        })

   //.catch(onError)

En la anterior clase no sabía como imprimir todos los personajes en orden, ahora en esta clase ya es más fácil.

var ids = [1,2,3,4,5,6,7]
var promesas = ids.map( id => obtenerPersonaje(id) )
Promise
	.all(promesas)
	.then(personajes=>{
		for(var i=1;i<=personajes.length;i++){
			console.log(`El personaje ${i} se llama ${personajes[i-1].name}`)
			//La promesa creada es un nuevo arreglo con 7 elementos, que van del 0-6
			//por lo tanto al presentarlos tengo que poner ${personajes[i-1].name}`)
			//el [i-1] es para que el primer dato del arreglo que está en 0, le sume 1
		}
	})
	.catch(onError)

Promise.all() => Recibe un array de promesas, todas estas pueden ser resueltas por el método fetch y logueadas por el método catch

const API_URL = 'https://pokeapi.co/api/v2/';
const PEOPLE_URL = 'pokemon/:id';

const options = { crossDomain: true }

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

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

var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var promesas = ids.map(id => obtenerCriatura(id));
Promise
    .all(promesas)
    .then(pokemon => console.log(pokemon))
    .catch(onError)

Entonces si las promesas son una herramienta mucho más eficaz, cuando es bueno utilizar callbacks?

Para no imprimir solo la lista de personajes, imprimo en consola cada uno de los personajes utilizando map

Promise.all(promises)
    .then(personajes => personajes.map(personaje => console.log(`Hola yo soy ${personaje.name}`)))
    .catch(onError)```

excelente este punto:

// Es la promesa de que habra un valor pero se desconoce. Puede suceder
// bajo una accion asincrona o sincrona.
// Promesas tiene 3 estados:
 // 1. => Pending
 //         => resolve => fulfilled
 //         => reject => rejected


 const API_URL = 'http://swapi.dev/api/';
const PEOPLE_URL = 'people/:id';

const opts = { crossDomain: true }; // Esto algo propio de Jquery, para cuando se quiere referencia hacia otra web

const onPeopleResponse = function (personaObjetoAPI) {
  console.log(`Mi Nombre es ${personaObjetoAPI.name}`); //name, es el nomre del atributo que se obtiene de la API
};
// hacemos el ejercicio ahora con implementando las promesas
function obtenerPersonaje(id) {
  //Metodo de promesa
  return new Promise((resolve, reject) => {
    // Armo el string de la URL
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`;

    // Linea JQuery para obtener el objeto de datos de la API
    // En vez de llamar el callback, se resuelve la promesa
    // se envia por parametro una funcion que se encargara de devolver
    // el resultado de si fue resuelta o no la promesa
    $.get(url, opts, (data) => {
      // Este resolve, solo se ejecuta si el JQuery no da error
      // El resolve, devolvera el data ala funcion anonima
      resolve(data);
    }) // Para el fail, se rechaza la promesa. Se devuel el id que se intentaba capturar de la API
      .fail(() => reject(id));
  });
}

function onError(id) {
    console.log (`Ha ocurrido un error al intentar obtener el id ${id}.`);
}

// Para ejecutar en multiples Promesas,
// declaramos un Array que contendra el orden de los id
var arrayIds = [1,2,3,4,5,6,7];

// Ahora lo que haremos es modificar el contenido de ese array con la promesa
//  para eso utilizamos el Map para incluir las promesas en orden
var arrayPromesas = arrayIds.map((id) => obtenerPersonaje(id));
// Ahora declaramo la promesa y el metodo que recibe un array de Promesas
Promise
.all(arrayPromesas)
//.then(personajes => console.log (personajes[1].name))
.then(personajes => console.log (personajes))
.catch(onError);

¿Entonces las Promesas sustituyen a los Callbacks?

Uso de .map para generar un array de promesas.
Uso de .forEach para generar el formato de impresión por consola que veníamos trabajando, pero con índice.
=)

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

//promesas
//(7) [Promise, Promise, Promise, Promise, Promise, Promise, Promise]
//retorna un array de promesas

Promise
	.all(promesas)
	.then((data)=>{
			data.forEach((item, indice)=>{
			console.log('Hola, soy '+item.name+'. indice: '+(indice+1))
		})	
	})
	.catch(onError)

Mis Apuntes:


//Para hacer request necesitamos saber url en una constante
const API_URL = 'https://swapi.dev/api/';
//Poner la parte de las personas (parte que varia) en otra constante
const PEOPLE_URL = 'people/:id/';
const opts = { crossDomain: true};

function obtenerPersonaje_v2(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(`Sucedio un error al obtener el nombre del personaje ${id}`);
}

//generar un array con multiples promesas
var ids = [ 1,2,3,4,5,6,7]
// usaremos maps para tomar un array y x cada elemento 
// retornaremos un elemento nuevo que sera un promesa
// la promesa se grabara en la variable promesa
var promesas = ids.map(id => obtenerPersonaje_v2(id))
// como obtener los valores de la promesa
Promise
    .all(promesas)
    .then(personaje => console.log(personaje))
    .catch(onError)
 

utilice el console.table para que imprima el array en una tabla

Palabras aprendidas de este curso: Prolijo 😄

Algo curioso de .catch es que también se dispara cuando algo sale mal en el .then

Si quieren imprimir los 100 primeros nombres de los personajes sería así:

let ids = [];
for (var i = 1; i <= 100; i++) {
  ids.push(i);
}
console.log(ids);

let promises = ids.map(id => getCharacter(id));

Promise.all(promises)
  .then(characters => {
    console.log(characters);
    return characters;
  })
  .then(characters => {
    for (i = 0; i < characters.length; i++) {
      console.log(`I'm ${characters[i].name}.`);
    }
  })
  .catch(onError);

Sin embargo el id #17 y otros más no funcionan así que tendrían que agregar otras cosas 😋.

Múltiples Promesas

var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9] 
var promesas = ids.map(id => obtenerPersonaje(id))
Promise
    .all(promesas)
    .then(data => {
        data.forEach((personaje, id) => console.log(`I am character #${id+1}, my name is ${personaje.name}`))
    })
    .catch(e => e())
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id'

const LUKE_URL = `${API_URL}${PEOPLE_URL.replace(':id',1)}`
const OPTS = { crossDomain:true }

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

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

var ids = [1,2,3,4,5]
var promesas = ids.map( (id) => getPersonajes(id) )
Promise.all(promesas)
    .then(person => {
        for(i=0; i< person.length; i++){
			console.log(`Hola yo soy ${person[i].name} y algunas de mis caracteristicas son:\n Altura: ${person[i].height} cm\n Color de cabello: ${person[i].hair_color}\n Color de ojos: ${person[i].eye_color}\n Genero: ${person[i].gender}\n Cumpleannios: ${person[i].birth_year}`)
		}
    })
    .catch(onError)

Note:
Promises are a way to write async code that still appears as though it is executing in a top-down way, and handles more types of errors due to encouraged use of try/catch style error handling.

"BUT"
If you really want your async code to read top-to-bottom, there are some fancy things you can try. Note that these may introduce performance and/or cross platform runtime compatibility issues, so make sure to do your research.

<h3>🏁 Pongamos a competir a las promesas lineales y a las paralelas 🏁</h3>

El truco esta en usar console.time() y console.timeEnd(). Les comparto mi código: https://github.com/Wisho1998/Promesas-Lineales-Paralelo

paralelas: 371.760009765625 ms
lineales: 2109.447998046875 ms

Esos tiempos fue en mi caso, comenta el tuyo 😄

3. PARA RESOLVER Y LLAMAR LAS PROMESAS

2. CON MÉTODO MAP RETORNAR IDs RECIBIDOS EN PROMESAS INDIVIDUALES

1. CREAR UN ARRAY CON LOS ID's DEL CONTENIDO DE LOS PERSONAJES

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


function obtnerPersonaje (id) {
  return new Promise((resolve, reject) => {
    const url = `${API_URL}${PEOPLE_URL.replace(":id", id)}`
    $.get(url, opts, function(data) {
      console.log(data)
        resolve(data)
        })
       .fail(() => reject(id))
  });
}
var ids = [1,2,3,4,5,6,7]

function onError(id) {
  console.log(`sucedio un error al obterner personaje ${id}`)
}


var promesas = ids.map( id =>  obtnerPersonaje(id) )

Promise
  .allSettled(promesas) //pasamos el array de promesas metodo 
  .then( personajes => console.log(personajes) )
  .catch(onError)>

Sin duda es complejo entender terminos con poca practica. pues el curso entrega los fundamentos, pero aun no vemos aplicacion real del codigo. si bien este ejemplo es bueno para comprender de manera superficial, espero que los siguientes cursos de la escuela nos ayuden con la practica para comprenderlo a profundidad y tener mas perspectiva.

dejo mi codigo por si le sirve a alguien

const API_URL = `https://swapi.dev/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(b){resolve(b)})
    .fail(  () => reject(id)   )
    })
}
function ERROR(id){
    console.log(`ERROR`)
}

var ids= [ 1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map( id =>  obtenerPersonaje(id))
Promise
.all(promesas)
.then(personajes => console.log(personajes))
.catch(ERROR)

Con un array dinamico

let numIds = 9;
let idStart = 1;
let idFinish = idStart + numIds;
let arrayIds = [];

for(let i = idStart; i < idFinish ; i++){
    arrayIds.push(i);
}

let promises = arrayIds.map(function(id){
    return peticion(id);
});

console.log(promises);

Promise
    .all(promises)
    .then(function(personaje){
        console.log(personaje);
    })
    .catch(function(personaje){
        console.log(`Error.`);
    });

Gran clase!

alguien me puede aclarar el codigo mas que todo las dos ultimas lineas , las otras las tengo clara.

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

var promesas = ids.map( (id) => obtenerPersonaje(id))

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


Muy practico! las promesas tienen gran potencial al encadenarlas.

Descripción de Promise.all

Promise.all se cumple cuando todas las promesas del iterable dado se han cumplido, o es rechazada si alguna promesa no se cumple. Promise.resolve.

Si alguna de las promesas pasadas en el argumento iterable falla, la promesa all es rechazada inmediatamente con el valor de la promesa que fué rechazada, descartando todas las demás promesas hayan sido o no cumplidas. Si se pasa un array vacío a all , la promesa se cumple inmediatamente.

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all#:~:text=El método Promise.,primera promesa que es rechazada.

les comparto algo que me ayudo a entender la funcion promise.all
espero les sirva

Excelentes clases, todo muy claro!

Good Good.!

buenas clases

excelente clase!!!

Con promesas podemos hacer llamados en paralelo, con los calllbacks no es posible.

Me sale un error the media playback was aborted due to a corruption problem or because the media used features your browser did not support.

Buen video donde explica promesas https://www.youtube.com/watch?v=9im-5iDgH54

como monto los ejercicios?

código múltiples promesas en paralelo

saludos,buenas clases


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(`Error al obtener el personaje ${id}`)
}


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

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

var promesas = ids.map(id => obtenerPersonaje(id) )

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

Con las promesas en paralelos, es super genial podemos consultar varias apis al mismo tiempo y mejorar el rendimiento de una funcion.

Descubrí que no es posible mostrar arguments en las arrow functions, como lo haciamos anteriormente

function (){
console.log(arguments) // Si funciona
}

() => console.log(arguments) // No funciona

Muy buena clase.

Dejo mi código el cual desglosa el personaje tal cual lo teníamos la primera vez, utilizando un segundo map para obtener uno por uno los personajes:

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

const opts = { crossDomain: true };

const onResponse = character =>
  console.log(`El personaje es ${character.name}`);
const onError = id =>
  console.log(`Ocurrió un error al obtener el personaje ${id}`);

const fetchCharacter = id => {
  //Promesa siempre recibe dos funciones resolve(contiene la data), reject(devuelve el mensaje que quieras r3etornar)
  return new Promise((resolve, reject) => {
    const CHARACTER_URL = `${API_URL}${PEOPLE_URL.replace(":id", id)}`;
    $.get(CHARACTER_URL, opts, data => resolve(data)).fail(() => reject(id));
  });
};

let ids = [1, 2, 3, 4, 5, 6, 7, 8];

var promises = ids.map(id => fetchCharacter(id));

//Se ejecuta un array de promesas
Promise.all(promises)
//Al ejecutar la promesa si se ejecutó bien se ejecuta el.then, si no el .catch
  .then(characters => {
    characters.map(character => {
      onResponse(character);
    });
  })
  .catch(onError);

Entonces cuando uso callbacks, estos no se hacen de forma paralela?
Entonces, ¿Que tipo de llamada hacen los callbacks?

Múltiples promesas en paralelo

Las promesas pueden ser encadenadas en paralelo, algo que con los callbacks no es posible de hacer tan sencillamente.

porque no me funciona esto … :C
cuando hago click no desaparece … ya revise y no funciona … :'v

inicializar() {
            btnEmpezar.classList.add("hide")
        }```

Les comparto mi ejemplo para este mismo problema:

var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var promesas = ids.map(getCharacter)

const printName = ({ name }) => console.log(`Hola soy ${name}`)
const onError = id => console.log(`Sucedió un error. No se pudo obtener la persona ${id}`)

Promise.all(promesas).then(p => p.forEach(printName)).catch(onError)

como colocas todo en comentarios tan rápido