Async y Await en JavaScript: Controlando el Asincronismo

Clase 21 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

En ECMAScript 2017 o ES8 fue añadida una nueva forma de manejar el asincronismo en JavaScript mediante funciones asíncronas.

Cómo utilizar funciones asíncronas

La función asíncrona se crea mediante la palabra reservada async y retorna una promesa.

async function asyncFunction () {...}

const asyncFunction = async () => { ... }

La palabra reservada await significa que espera hasta que una promesa sea resuelta y solo funciona dentro de una función asíncrona. Los bloques try / catch sirven para manejar si la promesa ha sido resuelta o rechazada.

async function asyncFunction () {
  try {
    const response = await promesa()
    return response
  } catch (error) {
    return error
  }
}

¿Cuál es la mejor forma de manejar promesas, then o async / await? Ambas son muy útiles, manejar ambas te hará un mejor desarrollador.

Curso de Asincronismo con JavaScript

Contribución creada por Andrés Guano (Platzi Contributor).

Luis Lara Perez

student•

creo que ya se me acabó mi cuota de neuronas diarias

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :) ES8:

Funciones asíncronas

const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve ("AsynC!!"), 2000)
        : reject(new Error("Error"));
    });
}

const anotherFn = async () => {
    const somethig = await fnAsync();
    console.log(somethig);
    console.log("Hello");
}

console.log("before");
anotherFn();
console.log("After");

Teo Zavala

student•

gran aporte, gracias.

Javier Núñez

student•

"async-await" es una manera de trabajar de una forma mas cómoda con promesas, la palabra reservada "async" quiere decir que una función siempre devolverá una promesa. Ahora la palabra reservada "await", solamente existe dentro de una función "async", que hace que JavaScript espere hasta que la función promesa responda para continuar con el código dentro de ésta función, pero sin pausar la ejecución del siguiente código.

Porfirio González López

student•

Buena Explicación.

Andrés Camilo Salgado

student•

Muy buena explicacion

Edgar López Laynez

student•

Para los que se les esta dificultando entender estos temas, después de indagar por varias horas, obtuve lo siguiente.

Funcion asincrona: Una función asincrona lo que hace es aislar todo el flujo que contiene para que no intervenga en el flujo externo de la función, o sea nuestra aplicación completa. En otras palabras simula ser un HILO el cual en otros lenguajes de programación el usar hilos podemos ejecutar varios procesos simultaneos sin detener nuestro programa.

Por ejemplo: Tengo una aplicación en la que mis clientes manipulan y consultan datos continuamente y mi aplicación quiere hacer una descarga de un archivo pesado, si lo asemos sin asincronismo o sin usasr un "HILO" lo que pasará es que mientras ses descarga el archivo nuestro programa se congelara hasta que se termine de descargar el archivo. PERO si usamos funciones asincronas o HILOS lo que podremos hacer es que podremos decargar el archivo en segundo plano y nuestros clientes podran seguir usando el sistema sin problemas

Fabricio Huaquisto Quispe

student•

me quedo muy claro muchas gracias

Marlón Andrés Cuartas Aguirre

student•

Edgar, muchas gracias por tu explicación, fue de gran ayuda.

Alba Cecilia Arenas Navarro

student•

Este es un tema complejo que si es la primera vez que lo estudias probablemente este muy complicado entenderlo. Peeeero no te rindas! Lo que hice fue ver distintas clases que hablaban de asincronismo hasta que pude entender que era lo que sucedia

Edgar Alfredo López Salero

student•

Funciones Asincronas: Dado que JavaScript es un lenguaje sincrono, surgieron las funciones asincronas, estas son usadas para poner las promesas en segundo plano, para esperar que estas sean ejecutadas. Dado que las promesas tardan un poco mas en ejecutarse.

Alvaro Calle Machaca

student•

Para el manejo de errores en async await se usa un try catch

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url);
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

Antonio Rafael González Ferrer

student•

Excelente explicación de algo que muchas veces creemos dominar hasta que te percatas de que no estás obteniendo el dato que necesitas por utilizar mal el async await 😅

Josue Cerron Tuesta

student•

Uff, me ha pasado!

Brayan Ricardo Duque Martinez

student•

ey ey ey ey!! mucha información!! console.log(¡Error!); ¡¡BOOM!!

Xavier Flores

student•

jajajajajaja xD

Edgar Josué Torres Urquilla

student•

bro no entiendo que esta pasandoooo

Adrian Restrepo

student•

Holaa! les comparto mi práctica:

const countriesList = (countrie) => {
    const countries = { panama: "Ciudad de panamá", venezuela: "Caracas", argentina: "Buenos Aires", colombia: "Bogotá", españa: "madrid", italia: "roma", china:"Pekín", rusia:"moscú" };

    return new Promise( (res,rej) => {
        setTimeout(()=>{
            const listArray = Object.keys(countries);
           if(listArray.includes(countrie))  {
            const list = Object.entries(countries)
            for (const iterator of list) {
                if(iterator[0]==countrie)
                res(`la capital de ${countrie} es ${iterator[1]}`);
            }
           }else
                rej((`la capital de ${countrie} no se encuentra en esta lista`));
        },3000)
    })
}

const getCapitalCountries = async () => {
    console.log("cargando...")
    await countriesList("argentina")
        .then( res => console.log(res))
        
}

getCapitalCountries()
    .catch(rej => console.log(rej));

Hay formas de hacerlo más optimo xdd, pero quería incluirle muchas cosas jejox

¿Cómo lo harías tu?

Gustavo Alonso Aguilar Acuña

student•

Me encanta!! Traté primero de solo leer el código sin ejecutarlo, para practicar mi análisis... (lo recomiendo) Y lo veo excelente, muy creativo!

Hector Maluy Fernandez

student•

Me gustó tu idea y modifiqué tu código de esta manera:

const countriesList = (country) => {
  const countries = {panama: "Ciudad de panamá", venezuela: "Caracas", argentina: "Buenos Aires", colombia: "Bogotá", espana: "madrid", italia: "roma", china:"Pekín", rusia:"moscú"};

  return new Promise((resolve , reject) => {
    setTimeout(()=>{
      countries[country]
      ? resolve(`La capital de ${country} es ${countries[country]}`)
      : reject((`la capital de ${country} no se encuentra en esta lista`));     
      },2000)
  })
};

const getCapitalCountries = async (pais) => {
  try {
    console.log("Buscando información...");
    let respuesta = await countriesList(pais);
    console.info(respuesta);
  } catch(error) {
    console.log(error);
  }        
}

getCapitalCountries("canada");

Jhon sebastian Garzon cano

student•

alguien que me explique que pasa con el 02? por que no lo usa

Ricardo Alfonso Chavez Vilcapoma

student•

Ni Freddy Vega lo sabe :(

VICTOR CAUDILLO

student•

Muy buena explicación, me gusta usar los console.log para ir debugeando y saber que pasa, muero de ancias de ver el curso de consumo de APIS ahí seguro usan ejemplos ya con consultas a BD 👋

JUAN CAMILO CAMPO TANGARIFE

student•

Está re buena esta característica de ES8, en realidad fue la que más me gustó. cuando se creaba llamados al servidor por ajax, era un desastre, un spaguetti de código, no sé si lo recuerda, después se mejoró con las promesas, y ahora con esta actualización, va a quedar mucho más simple el código para https requests.

Vicente Valderrama

student•

Async y Await cumplen la misma función que los métodos .then y .catch, la diferencia es que son mas legibles porque son similares al código secuencial. Aquí hay un video que resume ambos métodos.

https://www.youtube.com/watch?v=6O8ax3JYboc&list=LL&index=16&t=556s

Eduardo Rodriguez Yapur

student•

Les comparto un codigo mas comprensible:

const fnAsync = () => {
    return new Promise ((resolve, reject) =>{
        (true)
            ? setTimeout(() => resolve ('Luego de esperar 2 segundos'),2000)
            :reject(new Error('Error!'));
    });
}

const anotherFn = async() => {
    const something = await fnAsync();
    console.log(something);
    console.log('Hello!');
}

console.log('Antes');
anotherFn();
console.log('Despues');

Herald Flores

student•

Anotaciones ES8:

const fnAsync = () => {
	return new Promise( (resolve, reject ) => {
		(true)
		? setTimeout(() => resolve ("Async!!"), 2000)
        	: reject(new Error("Error"));
	});
}

const anotherFn = async () => {
	const somethig = await fnAsync();
   	 console.log(somethig);
    	console.log("Hello");
}

console.log("before");
anotherFn();
console.log("After");

Cristian Acalo

student•

🦄✨ ¿Por qué las Funciones Asíncronas son Necesarias?

En JavaScript, las tareas que llevan tiempo, como las solicitudes a servidores, consultas, requerimientos, etc, pueden bloquear la ejecución de un programa, lo que significa que el código no seguirá ejecutándose hasta que la tarea se complete. Esto puede hacer que una aplicación parezca "congelada" y no responda a las interacciones del usuario. Las funciones asíncronas se utilizan para evitar este problema al permitir que el programa continúe ejecutándose mientras se espera que se complete una tarea. Puedes mirarlo como una "Ejecución en segundo plano" o "Ejecución paralela" en otras palabras.

Irving Caamal

student•

Entre promesas y async/await, pienso que cada una tiene su aplicación, ninguna es mejor o peor que la otra, hay que saber cuando usar cual.

Erick Martin Meza Alonso

student•

Vos en casos las usarías una y en qué casos la otra?

Diego Armando Tejedor Cortes

student•

Con las promesas pienso que se pueden manejar mucho mejor los errores., con el reject de las promesas.

Y finalmente para los test seria más claro.

Adicional Oscar no explico bien como se manejan los errores con async-await

Ricardo Alfonso Chavez Vilcapoma

student•

Nunca había entendido lo de asincronismo, ahora ya aprendí al menos la sintaxis de promesas y async-await...a darle por más.

Mi resumen:

const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve ("AsynC!!"), 2000)
        : reject(new Error("Error"));
    });
}

const anotherFn = async () => {
    const somethig = await fnAsync();
    console.log(somethig);
    console.log("Hello");
}

console.log("before");
anotherFn();
console.log("After");

const countriesList = (countrie) => {
    const countries = { panama: "Ciudad de panamá", venezuela: "Caracas", argentina: "Buenos Aires", colombia: "Bogotá", españa: "madrid", italia: "roma", china:"Pekín", rusia:"moscú" };

    return new Promise( (res,rej) => {
        setTimeout(()=>{
            const listArray = Object.keys(countries);
           if(listArray.includes(countrie))  {
            const list = Object.entries(countries)
            for (const iterator of list) {
                if(iterator[0]==countrie)
                res(`la capital de ${countrie} es ${iterator[1]}`);
            }
           }else
                rej((`la capital de ${countrie} no se encuentra en esta lista`));
        },3000)
    })
}

const getCapitalCountries = async () => {
    console.log("cargando...")
    await countriesList("argentina")
        .then( res => console.log(res))
        
}

getCapitalCountries()
    .catch(rej => console.log(rej));

const countriesList = (country) => {
  const countries = {panama: "Ciudad de panamá", venezuela: "Caracas", argentina: "Buenos Aires", colombia: "Bogotá", espana: "madrid", italia: "roma", china:"Pekín", rusia:"moscú"};

  return new Promise((resolve , reject) => {
    setTimeout(()=>{
      countries[country]
      ? resolve(`La capital de ${country} es ${countries[country]}`)
      : reject((`la capital de ${country} no se encuentra en esta lista`));     
      },2000)
  })
};

const getCapitalCountries = async (pais) => {
  try {
    console.log("Buscando información...");
    let respuesta = await countriesList(pais);
    console.info(respuesta);
  } catch(error) {
    console.log(error);
  }        
}

getCapitalCountries("canada");

const fnAsync = () => {
    return new Promise ((resolve, reject) =>{
        (true)
            ? setTimeout(() => resolve ('Luego de esperar 2 segundos'),2000)
            :reject(new Error('Error!'));
    });
}

const anotherFn = async() => {
    const something = await fnAsync();
    console.log(something);
    console.log('Hello!');
}

console.log('Antes');
anotherFn();
console.log('Despues');

const fnAsync = () => {
	return new Promise( (resolve, reject ) => {
		(true)
		? setTimeout(() => resolve ("Async!!"), 2000)
        	: reject(new Error("Error"));
	});
}

const anotherFn = async () => {
	const somethig = await fnAsync();
   	 console.log(somethig);
    	console.log("Hello");
}

console.log("before");
anotherFn();
console.log("After");