No tienes acceso a esta clase

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

Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
14H
20M
50S

ES8: funciones asíncronas

24/38
Recursos

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.

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

Aportes 21

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Hola [email protected] 😃
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");

No entendí nada de esta clase :c

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

“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.

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.

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

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");
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 😅

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

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

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

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.

bueno asi, fue.

const fnAsync = () => (
  new Promise((resolve, reject) => {
      (true) 
      ? setTimeout(() => {resolve('Async')}, 3000)
      : reject(new Error('error :v'));
  })
)

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


console.log('before')
await anotherFn()
console.log('after')

si le coloco el await en el anotherFn() el orden de los console.log() seria el siguiente

  • before
  • async
  • hello
  • after

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

bro no entiendo que esta pasandoooo

A mi no me está mostrando el mensaje “Async” que tiene en resolve en consola. Solo me lo muestra si le pongo un console.log dentro del resolve. Alguien sabe por qué me pasa eso? El setTimeout está funcionando correctamente.

En resumidas cuentas, las funciones asíncronas están ahi para esperar a que otra función o promesa se ejecute, es decir, que una función asíncrona se ejecuta cuando la promesa o la función devuelve alguna respueta. Y esto lo hace sin interrumpir el flujo de trabajo de las funciones que le preceden. Corriganme si estoy mal 😄

Aquí les dejo el código de la clase:

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

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

console.log(‘Before’);
anotherFn();
console.log(‘After’);