Async/Await en JavaScript
Async/Await en JavaScript 1
¿Qué aprenderás? 2
Introducción 2
Async / Await 3
Sintaxis Async 3
Sintaxis Await 4
Ejercicio guiado: Controlando la asincronía 5
Restricciones 7
Ejercicio propuesto (8) 7
Ejercicio propuesto (9) 7
Ejercicio propuesto (10) 8
Resumen 8
¡Comencemos!
_ 1
[Link]
¿Qué aprenderás?
● Codificar una función asíncrona utilizando ASYNC/AWAIT para obtener una
respuesta directa y no una promesa.
● Identificar las restricciones de Async / Await en ES6 para evitar errores de
implementación en el código.
Introducción
Hasta el momento, logramos trabajar con código de manera asíncrona implementando las
Promesas, pero, como las promesas devuelven promesas y no valores, es necesario mejorar
aún más el lenguaje para que cuando ejecutemos un código asíncrono, retorne el valor de lo
solicitado sin tener que verificar si fue resuelta la promesa o no. Para esto, aprenderemos el
uso de funciones asíncronas (async) que una vez declaradas, siempre devolverán promesas
y que en conjunto con await, podamos recibir sólo los resultados. Siendo este otro tema
muy importante que aprenderás a lo largo de la unidad y tendrá mucha utilidad para el
desarrollo de tus proyectos desde el frontend o el backend, dando un mejor orden y por lo
tanto lectura al código, facilitando el mantenimiento y futuras expansiones o mejoras.
_ 2
[Link]
Async / Await
Ya vimos que las promesas pueden manejar código asíncrono y se comportan como si
fueran síncronos, además sabemos que devuelven una promesa cuya respuesta no es
conocida hasta que se resuelve o se rechaza. Por ende, lo que viene a resolver Async/Await
es permitir que las funciones que retornan promesas, devuelvan directamente los resultados
en vez de promesas.
Sintaxis Async
async function name([param[, param[, ... param]]]) {/* ... */}
Se utiliza la palabra clave async antes de la declaración de una función, lo que nos indica
que siempre retornará una promesa.
async function f() {
return 1;
}
f().then(resp => [Link](resp));
En la función asíncrona anterior, vemos que se devuelve un valor, pero como está declarada
como asíncrona retorna una promesa y por eso es posible continuar el llamado con el
método .then al que se le pasa un callback que contiene la respuesta de la función.
1
Promise { <state>: "pending" }
Cuando queremos utilizar las funciones para pedir datos externos a través de requests,
necesitamos que se ejecute esa sentencia antes de devolver la respuesta, por lo que
utilizaremos la palabra reservada await para esperar y retornar la promesa. El operador
await solo trabaja dentro de una función async.
_ 3
[Link]
Sintaxis Await
let value = await promise;
Un ejemplo de la función asíncrona en conjunto con el await sería de la siguiente forma:
const getExternalData = () => {
return new Promise((resolve) => {
setTimeout(() => { resolve('hola mundo') }, 2000)
})
}
const getData = async () => {
const resp = await getExternalData();
[Link](resp)
}
getData();
Al declarar la función getData como asíncrona, ya podemos continuar después de obtener el
resultado que trae los datos requeridos. Por ende, al ejecutar directamente el código anterior
en la consola del navegador web, el resultado sería:
Promise { <state>: "pending" }
hola mundo
Veamos un ejemplo obteniendo datos externos, por lo cual, implementaremos el método
fetch, quien proporciona una interfaz JavaScript para acceder y manipular partes del canal
HTTP, tales como peticiones y respuestas de una manera fácil y lógica de obtener recursos
de forma asíncrona.
_ 4
[Link]
Ejercicio guiado: Controlando la asincronía
Crear un programa que consulte una URL que entregue fotos aleatorias de perros, siendo
esta URL: [Link] Además se debe implementar Async
/ Await a lo largo del ejercicio y utilizar la estructura try...catch. Para ejecutar el código y
atrapar un error en el caso de existir uno. Se solicita implementar el método fetch.
Para realizar este ejemplo, debemos seguir los siguientes pasos:
● Paso 1: Crear una carpeta en tu lugar de trabajo favorito y dentro de ella crea dos
archivos, un [Link] y un [Link]. Seguidamente, en el [Link] debes escribir
la estructura básica de un documento HTML como se muestra a continuación:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Async/Await</title>
</head>
<body>
<h4>Usando ES6 - Async / Await</h4>
<script src="[Link]"></script>
</body>
</html>
● Paso 2: En el archivo [Link], creamos primeramente una constante que maneje una
función con la palabra reservada async para hacer a la función llamada getDogPhoto
asíncrona, esta función se encargará de hacer la conexión y la traída de información
de la URL que genera la foto aleatoria de los perros. Dentro de ella, vamos a definir
una constante url con la dirección web de la cual deseamos traer la información.
const getDogPhoto = async () => {
const url = '[Link]
}
_ 5
[Link]
● Paso 3: Ahora dentro de la función creada anteriormente, trabajaremos con la
estructura try...catch, primeramente para indicar un bloque de instrucciones a
intentar (try) y luego un bloque para indicar si se produce un error. En el bloque try,
crearemos dos constantes, una que contenga el método fetch con el parámetro
definido por la constante url, igualmente a este método le agregamos el operador
await. Ahora, fetch retorna una promesa, pero el await ayudará a recibir la respuesta
directamente de forma asíncrona, por consiguiente, se crea otra constante donde se
almacenará la respuesta que traiga fetch pasando a JSON e implementando el
operador await. Finalmente se muestra por la consola del navegador web la
respuesta obtenida. En caso de algún error, se maneja en el bloque catch.
const getDogPhoto = async () => {
const url = '[Link]
try {
const response = await fetch(url);
const photo = await [Link]();
[Link]([Link]);
} catch (err) {
[Link](err);
}
}
getDogPhoto();
● Paso 4: Por último, hacemos el llamado a la función, ejecutamos el archivo
[Link] en el navegador web y revisamos la consola para observar el resultado.
Imagen 19. Resultado de la consola del navegador.
Fuente: Desafío Latam
_ 6
[Link]
Restricciones
Existen algunas restricciones para utilizar Async/Await y estas son:
1. Cualquier función puede ser asíncrona y utilizar async, pero hay que tener en cuenta
que la función pasa a retornar una promesa, por lo que debe continuar su ejecución
con .then para obtener el resultado.
2. Para utilizar la palabra reservada await debe hacerse solamente en funciones
declaradas con async. No se puede usar en funciones regulares.
3. Hay que tener cuidado con el alcance de las funciones asíncronas, ya que por su
naturaleza dejan continuar con la ejecución del resto del código.
Ejercicio propuesto (8)
Convertir el siguiente código para que se pueda usar promesas.
const log = (text, callback) => {
setTimeout(() => {
[Link](`${text}`);
callback()
}, 1000)
}
log('uno', () => {
log('dos', () => {
log('tres', () => { })
})
})
Ejercicio propuesto (9)
Utilizando promesas, crea la función verify al que se le pasen dos argumentos a y b, (deben
ser de tipo numérico), que los compare y resuelva la promesa si el primer número es mayor
que el segundo calculando la potencia del número “a” elevado al número “b” , y rechace la
promesa en caso contrario indicando que no se puede realizar la operación, muestre los
datos en la consola.
_ 7
[Link]
Ejercicio propuesto (10)
Crea una función que permita traer y mostrar por la consola del navegador web la
información de la siguiente dirección web: [Link]
Implementa Async...Await
Resumen
A lo largo de la lectura, se trabajó con distintos conceptos que permitieron visualizar y
entender el funcionamiento de un código asíncrono. Por lo tanto:
● Se explicaron los conceptos de sincronía y asincronía, como se ejecutan e
implementan en JavaScript.
● Trabajamos con el Event Loop para comprender como JavaScript desde su raíz
implementa el código asíncrono.
● Logramos observar como el Race Condition puede afectar la ejecución de nuestro
código.
● Se codificaron funciones asíncronas utilizando callbacks, setTimeout, Promise y
ASYNC/AWAIT. Visualizando las distintas formas de crear código con cada una de
estas sentencias.
Finalmente se identificaron las restricciones de Async / Await y como debemos evitar
errores en nuestro código al momento de aplicar estas funciones asíncronas.
_ 8
[Link]