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

Async-await: lo último en asincronismo

40/55
Recursos

Async-await es la manera más simple y clara de realizar tareas asíncronas. Await detiene la ejecución del programa hasta que todas las promesas sean resueltas. Para poder utilizar esta forma, hay que colocar async antes de la definición de la función, y encerrar el llamado a Promises.all() dentro de un bloque try … catch.

Aportes 210

Preguntas 49

Ordenar por:

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

notas curso: Fundamentos de JavaScript - Un saludo compañeros de Platzi

¿Quieres tener unos apuntes organizados para repasar en un futuro lo que estás aprendiendo en este curso? Práctica mucho, porque los apuntes ya los he hecho.

Resumen de la Clase
Async-await: lo último en asincronismo

Async-await es la manera más sencilla y clara de realizar tareas asíncronas.
Se parece mucho a la forma de escribir código hace unos años, de manera secuencial, desde arriba hacia abajo.
Lo que sí, incluye algunas palabras clave.

Como primer cambio a nuestro código anterior vamos a crear una función en la que incorporamos desde la declaración de la variable ‘ids’ hasta incluso el .catch.
A continuación llamamos a la función:

function obtenerPersonajes() {
    var ids = []
    for (let i = 1; i <= 10; i++) {
        ids.push(i)
    }
    var promesas = ids.map( id => obtenerPersonaje(id) )
    Promise
        .all(promesas)
        .then(personajes => console.log(personajes))
        .catch(onError)
}
obtenerPersonajes()

Después de la declaración de la variable ‘promesas’ guardamos los resultados de esas promesas en una nueva variable ‘personajes’.

async function obtenerPersonajes() {
    var ids = []
    for (let i = 1; i <= 10; i++) {
        ids.push(i)
    }
    var promesas = ids.map( id => obtenerPersonaje(id) )
    var personajes = await Promise.all(promesas)

Notese la palabra clave ‘await’ antes de Promise.all. Esta hace que el código dentro de la función se detenga en ese lugar hasta que se concretan todas las promesas.
Para poder usarlo debemos declarar la función como ‘async’.

Para que esto funcione debemos poner este await dentro de una estructura try/catch.

function obtenerPersonajes() {
    var ids = []
    for (let i = 1; i <= 10; i++) {
        ids.push(i)
    }
    var promesas = ids.map( id => obtenerPersonaje(id) )
    try{
        var personajes = await Promise.all(promesas)
        console.log(personajes))
    } catch(id) {
        onError(id)
    }
}
obtenerPersonajes()

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

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

    try {
        var personajes = await Promise.all(promesas)
        console.log(personajes)
    } catch (id) {
        onError(id)
    }
}

obtenerPersonajes()

Sin duda, hay que prácticar y leer más para entenderle mejor.

IDEAS CLAVES

=> Async Await, forma sencilla de realizar tareas asincronas
=> Es importante pensar en arrays a la hora de usar async await
=> Asyncs await detiene la ejecucion del programa hasta que todas las promesas sean resueltas

DESAFIO PERSONAL EN MI CODIGO
mostrar los personajes en pantalla recorriendoo el array, saludando con su nombre cada uno


/*
Autor: Daniel Páez
URL Autor: Daniel Páez
Tema de la clase: Async Await
Descripción: huyendo de los callback hell, descubriendo el paraiso
URL Autor:  heysoypaez.com
URL código: github.com/heysoypaez
*/

/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");



/*DECLARACIÓN DE VARIABLES
==================================*/
var personajesRender = document.getElementById("output");


/* VARIABLES CONSTANTES DE API REQUERIDA
==================================*/
const API_URL = "https://swapi.co/api/";
const PEOPLE_URL = "people/:id";
const LUKE_URL = `${API_URL}${PEOPLE_URL.replace(":id","1")}`
const options = {crossDomain: true};


/*Para realizar un request siempre es necesario saber la url a la cual queremos acceder*/


/*DECLARACIÓN DE FUNCIONES
========================================================*/


//Funcion para obtener Personajes de Star Wars por su Id
function obtenerPersonaje(id) {

	return new Promise( (resolve,reject) => {


		/*Declaración de Variables
		==============================*/
		const url = `${API_URL}${PEOPLE_URL.replace(":id",id)}`


		/*Declaración de Funciones
		=============================*/
		function successRequest(data) {
				resolve(data)
			}


		/*Peticiones a la API
		============================*/

		// $ === jquery, Usamos Jquery.get para requerir datos de la API
		$.get( url, options, successRequest )

		 //Usamos Jquery.fail para hacer algo especifico si el request falla
		 .fail( () => reject(id))
	})

}


//Funcion para  imprimir la info de los Personajes de Star Wars por su Id
function imprimirInfoPersonaje(character) {

		saludo = `Hola, soy ${character.name}`
		
		if (character.name === "Darth Vader") {
			saludo += ` y soy tu padre.`	
		} 
		
		console.log(saludo)
		//Estoy imprimiendo en el document body el mismo saludo que va a la consola
		personajesRender.innerHTML += `<h4>${saludo}</h4>`
}


function alertarError(id) {
	var mensajeError = `(Desarrollador backend) Malas noticias, hubo un error subiendo el personaje ${id}`;

	console.error(mensajeError);
	a

/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/

//funcion asincrona
async function obtenerPersonajes() {

var ids = [1,2,3,4,5,6,7];
//map tomaba un array y modificaba cada uno de sus elementos




//Ciclo para imprimir el saludo de cada personaje en el array ids llamandolo por su id
function imprimirInfoPersonajes() {

	for (var i = 0; i < ids.length; i++) {

		/*Variables
		========= */
		character = personajes[i]
		saludo = `Hola padawan, soy ${character.name}`
		
		/*Logica
		========= */
		if (character.name === "Darth Vader") {
			saludo += ` y soy tu padre.`	
		} 
		
		/*Ouput
		========= */
		console.log(saludo)
		personajesRender.innerHTML += `<h4>${saludo}</h4>`
		//Estoy imprimiendo en el document body el mismo saludo que va a la consola

	}

}


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

try {
	var personajes = await Promise.all(promesas)
	//cuando todas las promesas se resuelvan guardamelo aca
	console.table(personajes[0]);
	imprimirInfoPersonajes();
	

} 
catch(id) {
	alertarError(id);
}
//para poder usar await la funcion debe estar marcada como asincrona	

}

obtenerPersonajes()

/*no todos los navegadores lo soportan
pollyfill*/

/*=======================================
RENDER EN PANTALLA
Agregando al html datos de la clase
=======================================*/

//Variables
var temaClase = "Async Await";
var titulo = document.getElementById("title")
var contenidoClase = document.getElementById("contenido-clase")

//Variables reasignadas
titulo.innerHTML=  temaClase;
contenidoClase.innerHTML= temaClase;

//contenido de la clase

var apuntes = document.getElementById("apuntes")

//apuntes.innerHTML = `${textoContenido}`;

Comparto un post que explica un poco más de promesas y async await. Espero les guste y puedan dejar feedback!

https://platzi.com/tutoriales/1789-asincronismo-js/5063-las-promesas-y-async-await-logicamente-no-son-iguales-y-te-explico-el-porque/

El mismo ejemplo con async

No me queda del todo claro la ventaja de Async-await sobre las Promesas en paralelo que se usamos antes. Voy a leer un poco mas pero si alguien puede aclarar el tema, seria muy bueno. Saludos

const URL_API = 'https://swapi.co/api'
const opciones = { crossDomain: true };

const urlPersona = (id) => `${URL_API}/people/${id}`

const obtenerPersonaje = id =>
  fetch(urlPersona(id), opciones)
    .then(res => res.json())

const obtenerPersonajes = async () => {
  let promesas = []

  try {
    for (let i = 1; i <= 7; i++) {
      promesas.push(obtenerPersonaje(i))
    }

    let respuesta = await Promise.all(promesas)
    console.log(respuesta)
  } catch (error) {
    console.log(error)
  }
}

obtenerPersonajes()
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}`)
}

async function obtenerPersonajes(){
	const ids = []
	for (let i = 1; i <= 7; i++) {
		ids.push(i)
	}

	let promesas = ids.map(id => personaje(id))
	try {
		let personajes = await Promise.all(promesas)
		console.log(personajes)
	} catch(id) {
		onError(id)
	}
}

obtenerPersonajes()

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

//Para poder usar await la funcion tiene que empezar por "async"
async function obtenerPersonajes(){
    var ids = [1,2,3,4,5,6,7];
    var promesas = ids.map(id => obtenerPersonaje_v2(id));
//variable para asignar el valor de una tarea asincrona
//cuando todas las promesas se resuelvan, ese resultado guardarlo en "personaje"            
//              detener la ejecucion hasta que todas las promesas se resuelva
//              recien ahi se va a guardar en personajes  
//                 / 
//              await
// para poder usarlo ponerlo dentro de un bloque try catch
    try {
        var personaje = await Promise.all(promesas);    
        console.log(personaje);
    } catch (id) {
        onError(id);
    }
}

obtenerPersonajes();

y no vamos a ver fetch???

Un pequeño aporte, lo hice un poco más automático (:

async function getCharacter2() {
    var ids = [1, 2, 3, 4, 5, 6, 7]
    var promesas = ids.map(id => getCharacter(id))
    try {
        var personajes = await Promise.all(promesas)
        ids.forEach(id => {
            console.log(`Hola soy el personaje No. ${id} y me llamo ${personajes[id - 1].name}`)
        });

    } catch (id) {
        onError(id)
    }
}

getCharacter2()

Me confundió el llamar obtenerPersonaje y obtenerPersonajes por esa sutil diferencia y estuve un rato buscando el error que cometí.

const API_URL = 'https://swapi.dev/api/';
const PEOPLE_ID = 'people/:id';
let cantp = Number(prompt("¿Cuantos personajes deseas que carguemos?"));
const opst = { crossDomain: true };
let ids = [];


function obtenerPersonaje(id){
    //asi se declara una promesa
    return new Promise (function(resolve,reject){
        const URL_completa = `${API_URL}${PEOPLE_ID.replace(":id",id)}`;

        //conectamos con jquery
        $
        .get(URL_completa, opst, function(data){
            //solo se resuelve si la function del get es satisfactoria
            resolve(data);
        })
        .fail(() => reject(id));

    })
    
}

//funcion asincrona
async function obtenerPersonajesAsync(){
    //creo un ciclo for para obtener la cantidad de personajes solicitada al usuario
    for (i=1; i<=cantp; i++){
        //armo el array de ids
        ids.push(i);
    }

    //genero un nuevo array de promesas con los ids
    var promesas = ids.map(id => obtenerPersonaje(id))

    //bloque de validacion de errores try and catch
    try{
        //variable que almacenara los resultados de todas las promesas despues de ejecutadas
        let personaje = await Promise.all(promesas);

        //recorro nuevo array para imprimir
        for (i=0; i<personaje.length; i++){
            console.log(`El personaje ${i+1} se llama ${personaje[i].name}`);
        }
    }catch(id){
        console.log(`No pudimos encontrar el personaje con id ${id}`);
    }
}

obtenerPersonajesAsync();

El uso del try es para evitar errores inesperados y que nuestra aplicacion se rompa en produccion, no es obligatorio utilizarlo pero si es bueno aplicarlo si queremos una aplicacion con mas calidad de cara al usuario final.

A este punto, se siente un poco más de complejidad en las clases, sin embargo traigo la confianza en que gradualmente lo iré entendiendo mejor y asimilarlo más fácil con la práctica.

Hola Platzi Nauta ! 😄
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/

Impresionante!!!

Mi cara cuando aprendo cosas nuevas de Javascript en el curso (y eso que es BÁSICO) 😮

coidgo async-await


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


async function obtenerPersonajes(){
 
var ids = [1,2,3,4,5,6,7]


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

try{
    var personajes = await Promise.all(promesas)
    console.log(personajes)
}catch(id){
onError(id)
}
}

obtenerPersonajes();

Gente, tienen a mano buenas API's para consultar?

Está de leer más para entender mejor u-u

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

        $.get(URL_PERSONAJE, opts, function (data) {
            resolve(data)
        })
        .fail(() => reject(id))
    })
}

const onError = (id) => console.log(`Lo sentimos no se pudo leer el ${id}`)

//Async antes de la funcion
async function obtenerPersonajes() {
    var ids = [1, 2, 3, 4, 5, 6, 7]
    var promesas = ids.map(id => obtenerPersonaje(id))
    //Hasta que todas las promesas sean resueltas guardalo aquí
    //Para poder utilizarlo debe de ir en un try catch
    try {
        var personajes = await Promise.all(promesas)
        console.log(personajes)
    } catch (id) {
        onError(id)
    }
}

obtenerPersonajes()

Ejemplo con promises usando setTimeout

Estos son mis apuntes, no sé si están del todo correctos. Me gustaría que ayuden a mejorarlos. Gracias!

PASO 1:
    Hay grandes similitudes de este ejercicio con el anterior. Creamos un array de IDs, a partir de ese array cremos otro array (promesasArray) tras la ejeución de la función "obtenerPersonaje(x)" usando como parámetro el valor de cada elemento del array IDs.

PASO 2:
    Sin embargo, la diferencia principal es el uso de ASYNC-AWAIT.
    ASYNC se coloca delante de function, para indicar que se trata de una función asíncrona, es decir, que depende de la respuesta de un servidor, de manera que las respuestas del server puede no estar sincronizado con lo que espera JS.

PASO 3:
    Posteriormente usamos un bloque TRY-CATCH para ejecutar un console log en función de si la promesa se reolvió con éxito o no.

    Si la promesa se resolvió con éxito usaremos TRY. Si provamos el TRY y este no tiene datos, significa que la promesa no tuvo éxito, entonces pasamos al CATCH para ejecutar la función onERROR.

PASO 4:
    Como la resolución de las promesas es un proceso asíncrono, que depende del server usamos la palabra AWAIT = "a la espera", para indicar que hasta que no se resuelvan todas no se procederá a guardar la data de esas promesas dentro de la variable "personajES".

PASO 5:
    Una vez guardado en "personajES" el array generado por Promise.all. TRY, evaluará todos los elementos. Si hay algún error, es decir, una promesa no se ha resuelto con éxito, pasaremos al catch, pasando como parámetro el id de la función "reject".

    Es por eso, que cuando llega al ID: 17 no se muestra el Array de la data obtenida.

Hay un curso de Platzi que profundiza mucho este tema https://platzi.com/clases/asincronismo-js/

Otro detallito más:
Los comentarios los coloco en otro lado, como si la pagina no actualizara la section de los comentarios.
¿Les paso a ustedes o solo a mi?
…crazy e!

Creo que algo muy importante que falta es FETCH ya que si estamos viendo vanilla el uso de jQuery no debería de seguir(al menos en este curso)

¿Cuál es mejor en tiempo de ejecución? ¿Async-await o Promise.all?

He estado usando Firefox y no me ha presentado problemas

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

async function obtenerCriaturas(){
    var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
    var promesas = ids.map(id => obtenerCriatura(id));
    try {
        var pokemones = await Promise.all(promesas)
        console.log(pokemones)
    } catch(id) {
        onError(id)
    }  
}

obtenerCriaturas()
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 (data) {
        resolve(data)
      })
      .fail(() => reject(id))
  })
}

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

function mostrarPersonaje(personajes) {
  for(let personaje of personajes){
    console.log(`Hola, yo soy ${personaje.name}`)
  }
  
}

async function obtenerPersonajes() {
  var ids = [1, 2, 3, 4, 5, 6, 7,8,9,10,11]

  var promesas = ids.map(id => obtenerPersonaje(id))
  try {
    var personajes = await Promise.all(promesas)
    console.log(mostrarPersonaje(personajes))
  } catch (id) {
    onError()
  }
}



obtenerPersonajes()

Con el ejercicio anterior haremos los siguientes cambios

  • Los personajes se los pondrá en una variable seguido de las promesas, le asignamos el valor de una tarea asíncrona
var personajes = await Promise.all(promises);
  • A la función le agregamos antes de la palabra function, la palabra async
async function obtenerPersonajes() {
  • Posterior a eso se encierra en un try catch el código para que así si existe un error lo atrpe en catch, quedando así
try {
    var personajes = await Promise.all(promesas);
    console.log(personajes);
  } catch (id) {
    onError(id);
  }

Otra forma de hacer estas tareas asincronas.

async function obtenerPersonajes() {
  var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  var promesas = ids.map(id => obtenerPersonaje(id))
  try {
    var personajes = await Promise.all(promesas)
    console.log(personajes)
  } catch(id) {
    onError(id)
  }
}

obtenerPersonajes()

No sé, como que las promesas encadenadas de la clase anterior me pareció una manera más clara e igual de larga de llegar al resultadi. ¿Es en verdad más práctico y simple el Async - await?

Hay un nuevo comportamiento con async await:

  1. Podemos usar await sin necesidad de async

  2. Anteriormente el siguiente código marcaba un error:

await Promise.resolve(console.log('🎉'));
  1. Pero ahora es completamente válido.

Por favor lee la documentación oficial para que sepas la importancia de este cambio.

Nota: Recuerda que Chrome y Node funciona bajo el motor V8, por lo que si no te funciona esta sintaxis… trata de actualizarlos.

Aquí la documentación oficial: Top Level Async

Puedo utilizar async/await en un prototipo de tipo clase? Es decir:

class MiClase {

  async miMetodo() {
	const response = await miPromesa
  }
	
}

Es posible lo anterior o aplica exclusivamente para funciones ‘normales y arrow’ ?

Con async / await se simplifica el uso de las promesas y la asincronía, haciendo que sea más sencillo de leer el código.
Con await la función async se pausa, se espera a que termine la Promise pasada y luego se reanuda la ejecución de esta función.
Al utilizar async await, debemos usar un try / catch para el manejo de errores

He puesto el codigo para que me de los personajes con un for para no declararlos en el array manualmente

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(`Sucedio un error. No se obtuvo el parametro ID`)
}

async function obtenerPersonajes(){
    var personajeCantidad = 101
    var ids = [] //= [1, 2, 3, 4, 5, 6, 7]
    for (var i=1;i<personajeCantidad;i++){
        ids [i] = i
    }
    var promesas = ids.map(id => obtenerPersonaje(id))
    try {
        var personajes = await Promise.all(promesas)
        console.log(personajes)
    }
    catch (id){
        onError
    }
}

obtenerPersonajes()```

Excelente clase, comparto mis notas

/*vamos a utilizar Async-await para simplificar el manejo de tareas asincronas. Await va a detener la ejecucion
del codigo hasta que todas las promesas que solicitemos sean resueltas. 
Para poder usarlo, tenemos que colocar async antes de declarar la funcion, y encerrar el llamado a 
Promises.all() dentro de un bloque try catch.*/
const API_URL = 'https://rickandmortyapi.com/api';
const PEOPLE_URL = 'character/:id';
const opts = '{crossDomain:true}';
//en la funcion que obtiene 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}`);
}

async function obtainCharacters(){
//vamos a guardar en un array los personajes que queremos traer
var ids = [1,2,3,4,5]
var promesas = ids.map(id => obtainCharacter(id));
try { //encerramos la peticion en un bloque try/catch
    var characters = await Promise.all(promesas) //usamos await para que los datos no se guarden en character hasta que no se terminen todas las promesas
    for (let i = 0; i < promesas.length; i++) {
        console.log(`${characters[i].name}`);
        document.write(`<img src="${characters[i].image}">`); 
    }
} catch(id){//capturamos el posible error y se lo pasamos a la funcion onError
    onError(id)
}

}
//ahora debemos llamar a la funcion obtainCharacters()
obtainCharacters();```

Super especial este contenido de Async await, muy útil

Tengo que verlo de nuevo y leer un poco más sobr este tema!

Todos los navegadores lo soportan ahora 😄

Apuntes de la clase

/*
Async-await es la manera más simple y clara de realizar tareas asíncronas. 
Await detiene la ejecución del programa hasta que todas las promesas sean resueltas. 
Para poder utilizar esta forma, hay que colocar async antes de la definición de la función, 
y encerrar el llamado a Promises.all() dentro de un bloque try … catch.
*/

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

    })

}

//Función ejecutada si se detecta una promesa en estado rejected o rechazada
function onError(id) {
    console.log(`No se pudo obtener respuesta para personaje ${id}`)
}

async function obtenerPersonajes() {

    //Arreglo con los ids de personajes deseados
    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))

    //Se debe colocar la sección asíncrona de la función en un bloque Try/Catch
    try {

        //Línea que se ejecutará de forma asincrona, la palabra reservada await, detiene la ejecución del código
        //esto hace que el código no siga hasta que todas las promesas sean resueltan y se debe usar la palabra async 
        //antes de la palabra function al declarar la función
        var personajes = await Promise.all(promesas)

        //impresión de los personajes
        console.log(personajes)

    } catch (id) {
        onError(id)
    }
}

obtenerPersonajes()



Para compartir, en la nueva funcion pase por alto cambiar el nombre a obtenerPersonajes y deje el mismo en donde se resuelve la promesa obtenerPersonaje, conclusión: puse a volar mi navegador xD, se quedo procesando por mucho tiempo y me toco matar el proceso jajajaja

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

const OPTS = { crossDomain: true }

//ASYNCA AWAY


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

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

//ejemplo de funcion async-await
async function obtenerPersonajes()
{
    var ids = [1,2,3,4,5,6,7]
    var promesas = ids.map(id => obtenerPersonaje(id))
    try {
        var personajes = await Promise.all(promesas)
        console.log(personajes)
    }
    catch (id)
    {
        onError(id)
    }
}

obtenerPersonajes()
const API_URL = 'https://swapi.dev/api/'

const PEOPLE_URL = 'people/:id'
const OPTIONS = { crossDomain: true }

function obtenerPersonaje (id) {

// creacion de la promesa
return new Promise ((resolve, reject) => {

 //creacion de la URl
 const URL = `${API_URL}${PEOPLE_URL.replace(':id', id)}`

 $
 .get(URL, OPTIONS, function(data) {
     resolve(data)
})
   .fail(() => reject(id))

})
}

//Creacion de una funcion de errores
const onError = (id) => console.table(`Ocurrio un error y no se pudo obtener al personaje ${id}`);

async function parsePeople() {
  var ids = [1, 2, 3, 4, 5, 6, 7]
  var promesas = ids.map(id => obtenerPersonaje(id))
  try {
      var personajes = await Promise.all(promesas)
      console.table(personajes)
  } catch (id) {
    onError(id)
  }
}

parsePeople()

En clases anteriores [1] [2] enseñé el código que hice para también obtener los datos de las urls que están dentro de los personajes. Acá se me hizo difícil tener los mismos resultados de manera ordenada con promesas, pero pude averiguarlo.

const URL_SWAPI = 'https://swapi.dev/api/'
const URL_PEOPLE = 'people/id'

const personaHablar = id =>
{
    return new Promise((resolve, reject)=>
    {
        let person_url = `${URL_SWAPI}${URL_PEOPLE.replace('id',id)}`
        $
        .get(person_url,{ crossDomain : true }, data=>resolve(data))
        .fail(()=>reject(id))
    })
}

async function obtenerPersonajes()
{
    var ids = [1,2,3,4,10,10,10,10]
    
    var promesas = ids.map(id=>personaHablar(id))
    
    try 
    {
        var personajes = await Promise.all(promesas)
        obtenerDatosTotales(personajes)
    } catch (error) {
        console.log('Error con personaje ' + error)
    }
}

function homeworldData(person)
{
    return new Promise((resolve, reject)=>{
        let planet_url = person.homeworld
    $.
    get(planet_url, { crossDomain : true }, planet=>resolve(planet))
    .fail(()=>reject(person.name))
    })
}


async function obtenerDatosTotales(personajes)
{
    var worldData = personajes.map(persona=>homeworldData(persona))

    try {
        var totalWorldData = await Promise.all(worldData)
        for (let i = 0; i < personajes.length; i++) {
            mensaje(personajes[i], totalWorldData[i])
        }
    } catch (error) {
        console.log(`Ups! Parece que ocurrió un error con ${error}`)
    }
}

function mensaje(person, planet) {
    console.log(`Hola, soy ${person.name} y nací en ${planet.name}. 
Su población es de ${planet.population != 'unknown'?planet.population:'no se sabe cuantos'} habitantes.`)
}

obtenerPersonajes()

¡Cualquier duda/aporte ya saben qué hacer!

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

//request jquery
opts= {crossDomain: true}

// callback




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

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

Promise
    // metodo al que se le pasa un array de promesas
    .all(promesas)
    .then(personajes => {
        for (var i = 0; i < personajes.length; i++) {
            console.log(`El personaje ${window.ids[i]} es ${personajes[i].name}`)
        }
    })
    // el catch onError sucedera si cualquiera falla
    .catch(onError)

<code>

🥰Resumen clase 35
//await: ejemplo (var personajes = await Promise.all(promesas))
//para poder usar un AWAIT necesitamos que la funcion que lo contiene sea asincrona
//(ASYNC FUNCTION)
//toda la parte asincrona se pone en un bloque TRY CATCH
//try {
// var personajes = await Promise.all(promesas)
// console.log(personajes)
//} catch (id) {
// onError(id)
//}

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 (data) {
resolve(data)
})
.fail(() => reject(id))
})
}

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

async function obtenerPersonajes() {
var ids = [1, 2, 3, 4, 5, 6, 7]
var promesas = ids.map(id => obtenerPersonaje(id))
try {
var personajes = await Promise.all(promesas)
console.log(personajes)
} catch (id) {
onError(id)
}
}
obtenerPersonajes()

Buenas clases

Buenas tardes, cómo estan?
Acá me surge la misma inquietud que en la clase pasada… veo que acá con este proceso se genera un arreglo ya más organizado, sin embargo, me pasa lo mismo… ¿Cómo puedo acceder a el luego para proyectar los datos de los personajes? segun he entendido en el curso, esa variable que tiene los personajes no queda en el contexto global sino en el de la función… ¿qué se puede hacer en ese caso?

Tal cual como en .NET 😃

¿Entonces, Async Await sigue ejecutando codigo en la pila de ejecucion principal de javascript meintras espera que las promesas sean resueltas?

Probé colocar un simple alert() despues del bloque de codigo con las promesas y se ejecutó primero 😮

¿Cúal es la diferencia de usar el async-await y hacerlo de la manera que hicimos la clase pasada? en los dos casos me da un arreglo ordenado.

Por si alguien quiere la sintaxis en arrow function :

let obtenerPersonajePromesas = async () => {
    let idPersonajes = [ 1,2,3,4,5,6,7];
    let promesas = idPersonajes.map( (idPersonaje) => obtenerPersonaje(idPersonaje)) 
    try {
        let personajes = await Promise.all(promesas);
        console.log('Personajes: ', personajes);
    } catch (idPersonaje) {
        onError(idPersonaje);
    }    
}

Hola, una pregunta. ¿Usando este método, .them es reemplazado por ¨try¨?

Asyn-Await es mucho mas claro

Lo realicé de esta manera para obtener sólo los nombres de todos los personajes que nos retornan las promesas

const API ='https://swapi.dev/api/'
const PEOPLE_URL ="people/:id"
const opts ={ crossDomain: true}
function getCharacter(id){
    return new Promise((resolve,rejected)=>{
    const url = `${API}${PEOPLE_URL.replace(':id',id)}`
    $.get(url,opts,function(character){
        resolve(character)
    })
    .fail(()=>rejected(id))
})
}

async function getCharacters(){
    var ids =[1,2,3,4,5,6,7]
    var promesas = ids.map(id=>getCharacter(id))
    try{
        var character = await Promise.all(promesas)
        for (let i =0;i<promesas.length;i++)
        console.log("Hola, yo soy "+ character[i].name)
    }catch (id){
        console.log (`Sucedio un error al obtener el personaje ${id}`)
    }
}
getCharacters()

Se puede insertar un async y un array function?. O necesariamente tiene que ser “async function …”?

Se me fue un tanto difícil pero seguro con la practica mejoramos!

Aqui mi ejemplo de como usar los eventos y el asincronismo

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

const p1 = document.getElementById('personaje1')

const getApi = (id) => new Promise((resolve, reject) => {
    fetch(`${URL_PEOPLE.replace(':id', id)}`)
        .then((personajes) => resolve(personajes.json()))
        .catch(() => reject(id))
}); //fin de la constante getApi

const error_catch = (id) => console.log(`Se produjo un error al obtener el personaje: ${id}`)

async function obtenerData(){
    //array para llamar los datos de la API externa
    var idArray = [1, 2, 3, 4, 5, 6, 7];
    //aqui se guardaran las promesas qu se hagan al servidor
    var promesas = idArray.map(id => getApi(id))
    try {
        var personajes = await Promise.all(promesas)
        console.log(personajes)
        p1.innerHTML = personajes[0].name

    } catch (id) {
        error_catch(id)
    }

}

function onError(id){
  console.log(`hocurrio un error con el ${id}`)
}

async function obtenerPersonajes(){
  var ids = [1,2,3,4,5,6,7,8,9,10]
  var promesas = ids.map(id => obtenerPersonaje(id))
  try{
    var personajes = await Promise.all(promesas)
    console.log(personajes)
  } catch(id){
    onError(id)
  }
}

obtenerPersonajes()

Dejo mi código de referencia para entender el sentido de new Promise sin usar jQuery

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

async function obtenerPersonajes(){
  const PERSONAJES = document.getElementById("demo");
  var ids = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
  var promesas = ids.map(ids => obtenerPersonajeid(ids));
  try {
    var Personaje = await Promise.all( promesas )
        Personaje.forEach( (personaje, index) => {
          PERSONAJES.innerHTML += `EL PERSONAJE ${index + 1} ES: <strong> ${personaje.name.toUpperCase()} </strong><br/>`;
          console.log(`EL PERSONAJE ${index + 1} ES: ${personaje.name}`);
        })
        
  }catch (error){
    console.log(`HA OCURRIDO UN ERROR -> ${error}`);
  }
}

Async-await se utiliza para tareas grandes

const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id/'
//URL completo, en este caso tenemos que encadenar API_URL con PEOPLE_URL y a esta segunda reemplazar el :id por el id de cada personaje.
const URL = `${API_URL}${PEOPLE_URL.replace(':id',1)}`
//Este es un objeto que le indica al método si el callback es local o remoto.
const opts = { crossDomain: true }

//LA UNICA MANERA DE TENER EL ORDEN ES HACERLO A LO LARGO DEL PROGRAMA
/*Creamos una funcion para obtener varios personajes mediante el ID
- Modificaremos esta función obtenerPersonajes para que me retorne una promesa en vez que reciba un callback como paramatro, ya no va a recibir un callback si no que directamente va a retornar una promesa
-PROMESAS ENCADENADAS*/
function obtenerPersonajes(id){
   return new Promise((resolve, reject) => {
      const urlCharacter = `${API_URL}${PEOPLE_URL.replace(':id',id)}`
      $
      .get(urlCharacter, opts, (data) => {
         resolve(data)
      })
      .fail(() => reject(id))
   })
}
function onError(id) {
   console.log(`Sucedio un error al obtener el personaje ${id}`)
}
/*Async-await*/
async function obtenerPersonajesFUNCION () {
   var ids = [1, 2, 3, 4, 5 , 6, 7]
   var promesas = ids.map(id => obtenerPersonajes(id))
   try{
      var personajes =  await Promise.all(promesas)
      console.table(personajes)
   } catch (id){
      onError(id)
   }
}
obtenerPersonajesFUNCION()

el try reemplaza al then y el catch es el mismo?

Muy importante

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

function obtenerPersonaje (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(`Se presento un error con el prsonaje ${id}.`)
}

async function obtenerPerosnajes() {
    var ids = [1,2,3,4,5,6,7,8]
    var promesas = ids.map(id =>  obtenerPersonaje(id))
    try {
        var personajes = await Promise.all(promesas)
        console.table(personajes)
        console.log(personajes)
    } catch (id) {
        onError
    }
}

obtenerPerosnajes()

muy claro pero mas codigo

const API_URL = `https://pokeapi.co/api/v2/`
const PEOPLE_URL = `pokemon/: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(`sucedio un error al obtener el personaje ${id}`)
}


async function obtenerpersonajes(){ 
var ids = [1,2,3,4,5,6,7]

var promesas = ids.map(id=> obtenerPersonaje(id))
try {
    var personajes = await Promise.all(promesas)
    console.log(personajes)
} catch(id){
    onError(id)
}
}

obtenerpersonajes()```

Excelente Sacha, quedó super claro


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


const options = { crossDomain: true}


function getCharacter (id) {
    return new Promise(function (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 (`An error happened when we were trying to obtain the
     information of the chracter ${id}`)
}

//Async-await permite guardar elementros de manera
//asincrona en una variable

async function getCharacters () {
    var ids = [1,2,3,4,5,6,7]
    var promises = ids.map (id => getCharacter(id))
    try {
        var character = await Promise.all(promises) 
        console.log (character)    
    } catch (id) {
        onError(id)
    }
}

getCharacters()```

Estoy corriendo mis programas en Brave y al parecer si soporta las promesas (y)

Hice un pequeño programa que trae “x Pokemones” y uno en especifico según el nombre.
Psdt: Sé que está feo, pero fue solo para practicar el asincronismo 😄

Esto es muy bueno!

Codigo de la clase

/*

  Async-await es la manera más simple y clara de realizar tareas asíncronas. 
  Await detiene la ejecución del programa hasta que todas las promesas sean resueltas. 
  Para poder utilizar esta forma, hay que colocar async antes de la definición de la función,
  y encerrar el llamado a Promises.all() dentro de un bloque try … catch.

*/


const API_URL = 'https://swapi.dev/api/'
// Constante para consultar una persona por su ID (1, 2, 3 ... )
const PEOPLE_URL = 'people/:id'

/* Este segundo parámetro es un objeto que le indica al método si el callback es local o remoto. */

const OPTS = { crossDomain: true }

/* 
    Clase 32 Promesas una solución al "Callback Hell"
      
    En esta clase veremos las promesas, que son valores que aun no conocemos. Las promesas tienen tres estados:

      ► pending
      ► fullfilled (resolve)
      ► rejected
*/

// Ya no va a recibir un callback como parametro; lo va a invocar directamente

function obtenerPersonaje(id) {

  // Constructor de una promesa -- Las promesas llevan Como parametro una funcion
  return new Promise((resolve, rejected) => {
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
    $
      .get(url, OPTS, function (data) {
        resolve(data)
      })
      .fail(() => rejected(id))
  })
}

/*
  Funcion en caso de Error "OnError"
*/

function OnError(id) {
  return console.log(`Ocurrió un error al obtener el personaje ${id}`)
} 

/*
    Funcion obtenerPersonajes que va a realizar lo que aniadimos la clase anterior sobre Multiples promesas en paralelo
*/

//  Con la palabra async antes de fuction ► Hacemos la funcion "Asincrona"

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

  // Guardamos los personajes dento de una variable - Usamos "await" el cual detiene la ejecuacion de la tarea 
  // Hasta que todas las promesas se cumplan
  // El await va dento del try  y la accion que realizamos con la data recolectada

  try {
    var personajes = await Promise.all(promesas)
    console.table(personajes)
  } catch (id) {
    onerror(id)
  }
}

// Llamamos las funcion 

obtenerPersonajes();

Async await

const API_URL = 'https://swapi.dev/api/'
const PLEOPLET_URL = 'people/:id/'
const opt = { crossDomain: true }


function obtenerPersonaje(id) {

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


async function obtenerPersonajes(){
    var ids = [1,2,3,4,5,6,7,8]
    
    var promesas = ids.map(id => obtenerPersonaje(id))
    try {
        var data = await Promise.all(promesas)
        data.forEach((element, id) => {
            let { name, height, skin_color } = element;
            console.log(`Personaje #${id+1}: ${name}
    altura: ${height}
    color: ${skin_color}`)
        })
    } catch (id) {
        console.log(`Fallo es personaje ${id}`)
    }   
}

obtenerPersonajes()

Para los que sientan que no tienen del todo claro el asincronismo vengan a este curso. Definitivamente les va a completar la información faltante y dudas que tengan.

Eso de de await Promise.all()
Esta genial

Esta sección del curso (Asincronismo) lo ubica como un excelente y completo curso, solo quería dejar como comentario que no se si esto sea parte del “Fundamento” ya que pienso que se requiere un poco de experticia y experiencia para llevar a cabo los ejercicios aqui propuestos.

Tuve que ver la seccion dos veces para clarificar todo, y la verdad es que no me arrepiento de nada :3.

Async Await

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

async function obtenerPersonajes(){
    var ids = [1,2,3,4,5,6,7]
    
    var promesas = ids.map(id => obtenerPersonaje(id))
    
    //la funcion se detiene hasta el await, hasta que se termine la promesa en ejecucion
    try{
        var personajes = await  Promise.all(promesas)
        console.log(personajes)
    } catch (id){
        onError(id)
    }
}

obtenerPersonajes()

¿a ALGUIEN MAS LE PASO, QUE AL CONCLUIR LA PARTE TEÓRICA de fundamentos de JS aparece sobre arquitectura de computadores?.. !!!extraño muy extraño

El Async Await es la manera más sencilla de realizar las promesas, este se realiza como se programaba hace años de arriba hacia abajo, no horizontal ni encadenado.
Solo es necesario poner la palabra reservada del lenguaje await a las promesas, pero para poder utilizar await a la función tenemos que marcarla como asíncrona con la palabra reservada async.

Cuando usamos await este hara que se imprima una. Promesa primero que una orden que esta fuera de la promesa y despues de async?

¿ Cual es mejor practica, Async-await, o promise.all() ?

Me tardó demasiado. Pero, es una muy buena práctica.

Con async away ya no es necesario las key-word .then y .catch.

away: hace que el programa quede en esa línea hasta que se complete la promesa. Cuando se complete la promesa sigue ejecutando la siguiente línea del programa.

Use una función flecha para definir la función async

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

const opts = { crossDomain: true};

const 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 onError = (id)=>console.log(`Sucedió un error al obtener el personaje ${id}`);

let  getPersonajes=async()=>{
    var ids = [1,2,3,4,5,6,7];
    var promises = ids.map((id) => obtenerPersonaje(id));
    try {
        var data = await Promise.all(promises);    
        console.log(data)
    } catch (id) {
        onError(id);
    }
}

getPersonajes();```
const API_URL='https://swapi.co/api/';
const PEOPLE_URL ='people/:id';

const opts = { crossDomain: true};

const 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 onError = (id)=>console.log(`Sucedió un error al obtener el personaje ${id}`);

async function getPersonajes(){
    var ids = [1,2,3,4,5,6,7];
    var promises = ids.map((id) => obtenerPersonaje(id));
    try {
        var data = await Promise.all(promises);    
        console.log(data);
    } catch (id) {
        onError(id);
    }
}

getPersonajes();```

Sea solo para una promesa o para un array de promesas, el async-await se utiliza, si entendí bien, así:

await para la variable en donde queremos que la data (en el caso de que la promesa sea fullfilled) se guarde, en nuestro caso es los objetos personaje que queremos obtener de manera asíncrona, y la palabra async se utiliza el la nomenclatura de la función que va a ejecutar la tarea asíncrona, en este caso obtenerPersonajes.

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

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

const printPerson = res => console.log(`El personaje ${res.id} es ${res.name}`);

async function getPeople() {
  let ids = [1,2,3,4,5,6,7]
  let promises = ids.map(id => getPerson(id))

  try {
    let people = await Promise.all(promises)
    people.map(printPerson)
  }
  catch (id) {
    console.log(`Id ${id} not found`)
  }
}

getPeople()
const API_URL = "https://swapi.co/api/"

//Async-await: otra manera de hace tareas asincronas
function getPeoplePromise(id){
    const PEOPLE_URL = 'people/:id'
    var REQUEST_URL = `${API_URL}${PEOPLE_URL.replace(':id',id)}`
    var options = { crossDomain: true }

    return new Promise( (resolve, reject) => {
        $.get(REQUEST_URL, options, function(data) {
            resolve(data)
        })
        .fail( () => reject(id))
    })
}

function onError(id){
    console.log(`Error, no se pudo encontrar el personaje ${id}`)
}

async function obtenerPersonajes() {
    var ids = [1, 2, 3, 4, 5, 6]
    var promesas = ids.map(id => getPeoplePromise(id))

    try{
        var personajes = await Promise.all(promesas)
        console.log(personajes)
        for(var i = 0; i < personajes.length; i++){
            personaje = personajes[i]
            console.log(`Hola, mi nombre es ${personaje.name}`)
        }
    }catch(id){
        onError(id)
    }

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

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

async function obtenerPersonajes(){
  var ids=[1, 2, 3 ]
  var promesas = ids.map(function (id){
    return obtenerPersonaje(id)
  })
  try{
    var personajes = await Promise.all(promesas)
    console.log(personajes)
  }catch(id){
    onError(id)
  }
  
  
}

obtenerPersonajes()

Hola, al simular no tener conexion a internet a traves de la pestaña Network, obtengo el siguiente error : Sucedió un error al obtener el personaje ReferenceError: $ is not defined, como verán no sale el valor del id donde se genera el error, a alguien mas le pasa?