Async-await: lo último en asincronismo

Clase 40 de 55 • Fundamentos de JavaScript 2018

Resumen

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.

Jorge Israel Lombardero Juarez

student•

Les recomiendo mostrarlas en la consola con

console.table(personajes)

Como estamos trabajando con arreglos, se ve mucho más ordenado.

Isaac Morales Cedeño

student•

ese metodo no me lo sabia

Edwar Cedeño

student•

Cool.

Jorge Humberto Nemogá Pinzón

student•

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.

Esau Rosales

student•

Que agradable sujeto!! :)

José Tuzinkievicz

student•

Gran trabajo, muchas gracias!

Young Sin Lim

student•

Luis Paredes

student•

JAJAJJJAAJAJA

Augusto Jesus Muñoz Liñan

student•

jajaj

Ivan Santiago

student•

[Insertar imagen de Larry la langosta gritando]
Async Await es lo maximo!

Jesus Ricardo Moreira Cedeño

student•

Jajajaja

Henry Gabriel Rodríguez Tovar

student•

Pablo Andres

student•

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

Andrés David Loaiza Zamudio

student•

👏👏👏

Jonathan Jiménez Soveranes

student•

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

Willy David Da Conceicao Lozada

student•

Eso es cierto falto mas teoria

Daniel Páez

student•

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

Mauricio Hernan Cabrera

student•

Async-await con funciones flechas(arrow functions)

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

Luis Rosas

student•

Super!

David Vargas Domínguez

student•

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/

Pamela Cinthya Torres Gutiérrez

student•

Muchas gracias por compartir, me servirá para repasar

Ronald Jesús García Villanueva

student•

Aquí uno no se puede encariñar un ratico con una forma del código, capitulo siguiente llega Sacha y lo destruye Hahahah

Jimmy Buriticá Londoño

student•

Exacto

Jorge Delfino

student•

Muy bueno el modulo de Asincronismo, pero creo que le haría falta tocar algo de fetch como en el curso de “jQuery a Javascript”

Juan David Jaramillo

student•

El mismo ejemplo con async

Gabriel Ospina

student•

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

Bernardo Aguayo Ortega

student•

Gracias por el articulo

Rodrigo Mahamud García

student•

Hola buenas no se si alguien me puede ayudar pero Chrome se me queda pensando y no me muestra nada en consola, el código es el mismo que ha hecho el profe y la api me ha funcionado para hacer el resto de ejercicios así que esta operativa no se que estoy haciendo mal 😅

//------ESPLICADO EN EL JS ANTERIOR------//
const API_url = "https://swapi.dev/api/";
const people_url = "people/:id";
const luke = API_url + people_url.replace(":id", 1);
const opciones = { crossDomain: true };
const OnpeopleResponse = function (luke) {
	console.log("Hola me llamo " + luke.name);
};
//----------------------------------------//

function obtenerPersonaje(id) {
	return new Promise(function (resolve, reject) {
		const url = API_url + people_url.replace(":id", id);
		$.get(url, opciones, function (data) {
			resolve(data);
		}).fail(function () {
			reject(id);
		});
	});
}

function onError(id) {
	console.log("Error al obtener el personaje: " + id);
}
async function obtenerPersonaje() {
	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);
	}
}
obtenerPersonaje();```

Diego Mora

student•

¿Ya resolviste tu problema?Échale una mirada a la tab Network en el navegador, para saber si la petición se envió o si se resolvió. Si aún así no lo resuelves, escríbeme y te ayudo

Miguel Ángel Jancko Gutiérrez

student•

En la función

async function obtenerPersonaje() {

Debería ser en plural ya que te refieres a otra función distinta a la ya definida en el código:

async function obtenerPersonajes() {

Y lo mismo cuando llamas a la función al final de tu código:

obtenerPersonaje();

por:

obtenerPersonajes();

Me sucedió el mismo error y justo antes de preguntar lo mismo me percate.

Jose Daniel Molina

student•

Me gustó mucho la clase, pero no logré entender muy bien el funcionamiento del async / await, alguien que por favor me complemente eso?

Erika Luna

teacher•

Async declara que una función es asincrona y await es un comando que te permite continuar con el flujo de ejecución de tu programa y retomarlo una vez que el evento asincrono se complete.

Oscar Armando Del Angel Casillas

student•

que es un polyfield?

Luis Lira

student•

Hola!

Los polyfill son para dar la capacidad a los navegadores antiguos de ejecutar código más moderno de JavaScript :D

Miguel Antonio Caro Ocampo

student•

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

Alexander Vega

student•

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

Marcos Orozco Rios

student•

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

Bernardo Aguayo Ortega

student•

gracias bro

Javier Fuentes Mora

teacher•

y no vamos a ver fetch???

Jorge Humberto Nemogá Pinzón

student•

Usando fetch() no se ve el uso de new Promise porque ya viene en su definición, así que había que usar jQuery o XMLHttpsRequest. El fetch() queda como reto para cad uno.

Async-await: lo último en asincronismo

Introducción al curso

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

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

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