La función async y la palabra clave await
Contenido del curso
Callbacks
Promesas
Async/Await Javascript Moderno
Casos reales de uso de asincronismo
La función async y la palabra clave await
La función async y la palabra clave await
Contenido del curso
Cristian Contreras
Roger Alberto Chan Arjona
Kevin J. Zea Alvarado
Jesus Anguiano Solano
Jaime Alejandro Condori Machaca
Kevin J. Zea Alvarado
Felipe Castrillón
Edumedia Creando Juntos
Juan Cadavid
// Declaración
async function obtenerUsuarioDeclaracion (id) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!res.ok) throw new Error(`HTTP: ${ res.status }`);
return res.json();
};
const usuarioDeclaracion = await obtenerUsuarioDeclaracion(1);
const nombreDeclaracion = usuarioDeclaracion.name;
console.log(nombreDeclaracion);
// Expresión
const obtenerUsuarioExprecion = async function (id) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
if (!res.ok) throw new Error(`HTTP: ${ res.status }`);
return res.json();
};
const usuarioExpresion = await obtenerUsuarioExprecion(2);
const nombreExpresion = usuarioExpresion.name;
console.log(nombreExpresion);
// Flecha
const obtenerUsuarioFlecha = async (id) => {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
if (!res.ok) throw new Error(`HTTP: ${ res.status }`);
return res.json();
};
const usuarioFlecha = await obtenerUsuarioFlecha(3);
const nombreFlecha = usuarioFlecha.name;
console.log(nombreFlecha);
// Método de objeto
const obtenerUsuarioMetodo = {
async obtener (id) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
if (!res.ok) throw new Error(`HTTP: ${ res.status }`);
return res.json();
}
};
const usuarioMetodo = await obtenerUsuarioMetodo.obtener(4);
const nombreMetodo = usuarioMetodo.name;
console.log(nombreMetodo);
Output:
Leanne Graham
Ervin Howell
Clementine Bauch
Patricia Lebsack
No entiendo la frase azúcar sintáctica (syntactic sugar) es una analogia a algo artificial??
Honestamente, la primera vez que escuché el término hace unos años también me confundí. jaja Pero simplemente es un término que hace referencia a una característica de algún lenguaje de programación (no sólo de JavaScript) que hace que el código sea más fácil de leer, escribir y entender, pero que no añade una nueva capacidad al lenguaje.
El ejemplo más sencillo que encontré es:
x += 3
es azúcar sintáctica para
x = x + 3
No añade características adicionales al lenguaje, pero hace más fácil escribirlo.
En el caso de async y await, se consideran azúcar sintáctica porque, al crear una función con async, se está creando una función que por dentro retorna una promesa; además de que no se puede hacer algo más que no se haya podido hacer antes encadenando then tras then.
Respuesta del minireto:
const carga = async () => { const response = await fetch("/api/user") const data = await response.json() console.log(data) }
Llamado de la API usando una clase, sin embargo el uso de clases es un tema que todavía me falta desarrollar. Pendiente para repasar OOP con JavaScript.
class ServicioUsuarios { async obtener(id = 0) { /*codigo*/ const res = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ); if (!res.ok) return new Error(`HTTP ${res.status}`); const data = await res.json(); console.log(` name: ${data?.name} username: ${data?.username} email: ${data?.email} `); } } const getUsers = new ServicioUsuarios(); console.log(getUsers.obtener(4));
En el 1:48, la profesora comenta que await sólo se puede usar dentro de funciones declaradas con async; sin embargo, en el 3:00, utiliza await fuera de una función, en el scope global. Y funciona.
Esto es por el Top-Level Await, incorporado en ECMAScript 2022 (ES2022), el cual permite utilizar await en el nivel superior de los módulos.
En el caso de Node.js, que es la herramienta que la profesora utiliza para ejecutar los archivos de JavaScript de cada clase desde su terminal, desde la versión 14.8.0 se habilitó el Top-Level Await en módulos ECMAScript.
async function getData() {
const res = await fetch('api/user');
if (!res.ok) throw new Error(res.status);
const data = await res.json();
console.log(data);
}
🚀 Devs, les comparto un recurso que me pareció una auténtica joya apara dominiar async/await
const getUser = async () => {
const response = await fetch("api/user");
if (!response.ok) {
throw new Error('Falló fetch usuario');
}
const user = await response.json();
console.log(user);
}