Uso de Top-Level Await en JavaScript con Fake API

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

Resumen

Top level await permite utilizar la palabra reservada await, sin estar dentro de una función asíncrona con async. Sin embargo, únicamente se puede utilizar await en la parte superior del archivo de un módulo.

Cómo utilizar top level await

Anterior a ECMAScript 13, cuando se introdujo funciones asíncronas, si utilizabas await fuera de async, existirá un error de sintáxis.

// Error
await fetch(URL)
// SyntaxError: await is only valid in async function

Ahora, con top level await esto es posible, sin ningún error. Esto puede servir para importaciones de manera dinámica o iniciar la conexión de tus bases de datos. Siempre y cuando respetes que debe estar en la parte encima del archivo de tipo módulo.

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

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :)

ES13: Top level away en el consumo de una API

Products

import fetch from "node-fetch";

const response = await fetch("https://api.escuelajs.co/api/v1/products");
const products = await response.json();

export { products };

Top-level-await

import { products } from "./products.js";

console.log(products);
console.log("Hey!!");

Josue Cerron Tuesta

student•

Gracias!

Felix Torres Javier Antonio

student•

Graciar por el aporte!!.

Henry Jeffersson Salinas Arenas

student•

si te sale error tienes que poner esto: // Add the "type": "module" line in your package.json file. { "type": "module" }

Eduardo Zegers

student•

me sale este error

const response = await fetch('https://api.escuelajs.co/api/v1/products');       

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)

y ya puse el "type" : "module" =(

José Isidro Torres Caldea

student•

Eduardo, por el error que muestras, lo más probable es que su causa sea que estás usando la palabra reservada await sin el async. 👀

Diego Perez Perez

student•

Para toda la gente que el termino API, les resulte un poco familiar o quieran indagar mas en que son y para que sirven, les dejo este video para que se empapen un poquito mas de información acerca de las API's!

¿Qué es una API y para qué sirve?

Tatiana Muñoz Muñoz

student•

Muchas gracias por el enlace, esta super ese video, me fue de mucha utilidad.

Jhon Deiby Salazar Rayo

student•

Si les sale algún error de "module" o simplemente no carga la respuesta de la API deben poner en su archivo "package.json"

"type": "module",

Moises Navarro

student•

para los que le da error en la actualidad, pueden cambiar los archivos de .js a .mjs, inmediatamente pueden aplicar el run code y les cargara.

import { products } from "./products.mjs";
console.log(products);
console.log("hey !!");

Julia Gabriela Nieva Paredes

student•

Muchas gracias! Ya lo había aprendido y lo olvidé para este ejercicio.

Moisés Figueroa Peña

student•

Me parece que seria interesante para un website, hacer el importe dinamico de los productos, por el tema de los tiempos de carga. Dejo mi aportacion :)

//Codigo propio para prueba de importe dinamico
const products = await import("./products.js");
console.log(products);

carlos orozco

student•

Excelente API para realizar pruebas, en muchos otros cursos se usara

Maria Gabriela Rodriguez Cuevas

student•

📥 Archivos del Proyecto 📥

Pasos 📌

• Abrir una terminal en la ruta del proyecto e instalar fetch con:

npm install node-fetch

• Dentro de la carpeta es13, crear el archivo llamado: products.js
- - ◦ El código queda:

import fetch from "node-fetch";

// await debe estar porque si no arrojaría error porque necesita esperar hacer el fetch y luego transformar a un objeto
const response = await fetch('https://api.escuelajs.co/api/v1/products');
const products = await response.json();

export {products};

• Dentro de la carpeta es13, crear el archivo llamado: 01-top-level-await.js
- - ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

import {products} from "./products.js";

console.log(products);
console.log('Hey!');

/*output:
[aparece el objeto con los items de los productos de la fake api]
Hey!
*/

Sebastian Carballo

student•

Qué buenas notas compa, gracias!

Cristian Leonardo Castañeda Olarte

student•

Les recomiendo esta extensión para que vean más bonitos los json en el navegador :3 Json Viewer

Raul Santos

student•

No olviden que lo que instala el profe al principio lo hace en la carpeta que estamos trabajando, me daba un error y era porque hice la instacion pero en la carpeta que abre por default la terminal y ya luego me di cuenta que tenia que instalarlo en la carpeta en la que estabamos trabajando. Espero que le sirva a alguien.

Obed Pantoja Hernandez

student•

X2, incluso busco el link de la API en el navegador y me sale lo mismo, creo que el problema es de la API

Cristian Lotero Aquino

student•

Muchas gracias!! este comentario/ayuda estaba buscando! me pasó algo muy parecido.

Excelente aporte!

Herald Flores

student•

Genial el API 👏

Cristian Contreras

student•

A mi me sale este error. No sé cómo puedo corregirlo:

Jesús Vivas

student•

Me pasaba lo mismo. lo arregle poniendo la extension .js a products:

import { products } from "./products.js"

Gilbert Ardila

student•

Gracias por la fakeAPI, es difícil encontrar una API pública a la que se le pueda hacer post, put o delete y con esta API de Platzi se puede practicar estos conceptos

Teo Zavala

student•

Que gran API la de platzi.

Juan Carlos Cuello

student•

No pude solucionar el error:

ya le coloqué el type: module

pero me dice que hay un error en la importación

Heidenber Palacio Garzón

student•

Muéstranos el productos.js

Diego Velasquez

student•

el type: "module" no va dentro de "dependencies"

Ines Valeria Foglino

student•

Hola gente. Si les da error al correr el código, agreguen en json q se añade tipo módulo: { "type": "module", "dependencies": { "node-fetch": "^3.3.1" } }

Andres Felipe Vargas Gonzalez

student•

sin duda este fue mi favorito de todos! :D

Carlos Andrade

student•

34/35 ES13: top level await en el consumo de una API

Top level await permite utilizar la palabra reservada await fuera de las funciones asíncronas, pero solo en la parte superior del archivo de un módulo. Antes de esta introducción, utilizar await fuera de una función asíncrona generaría un error de sintaxis.

Ejemplo: importación dinámica de módulos utilizando top level await:

// Importación dinámica de módulos utilizando top level await
const myModule = await import('./myModule.js);

// Uso del módulo importado
console.log(myModule.myFunction());

Ejemplo: iniciar la conexión a una base de datos utilizando top level await

// Iniciar la conexión a la base de datos utilizando top level await
const db = await initDatabase();

// Uso de la conexión de la base de datos
db.query('SELECT * FROM users', (err, result) => {
	if (err) {
	console.error(err);
	return;
}
console.log(result);
});

Ejemplo: Uso incorrecto de await fuera del archivo de tipo módulo:

// Error: await solo es válido en una función asíncrona
await fetch('https://api.example.com/data');

En este ejemplo, el uso de await fuera de una función asíncrona generaría un error de sintaxis. Top level await correctamente, se debe asegurar que el archivo de JavaScript sea un módulo.

N40 M10

student•

{ statusCode: 500, message: 'Internal server error' } Hey!!

Josue Quevedo Portas

student•

Al parecer actualmente la API referente a productos no esta funcionando, me salió el mismo error, probé la de categorías y funciona perfectamente, aún aquí lo que importa es saber como hacer el llamado de la API y como manejar los módulos, ¡Saludos!

N40 M10

student•

Gracias por tu comentario. También me quede con esa idea, mientras pueda manejar los modulos no importaba si la API funcionaba. En mi caso no lo intente con otra api, gracias por confirmar. Saludos.

Luis Hernando Sendoya Serrato

student•

Está soportado en casi todos los navegadores

Uso de Top-Level Await en JavaScript con Fake API

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6

Playground: Obtén una lista de películas

Generators en JavaScript: Cómo implementar y usar iteradores personalizados

Playground: Generador de identificadores para michis

Método ADD en ECMAScript 6: Agregando Elementos a un Set

¿Qué se implementó en ES7?

Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes

¿Qué se implementó en ES8?

Métodos Object.Entries y Object.Values en ECMAScript 8

Manipulación de Strings y Arrays en ECMAScript 8

Async y Await en JavaScript: Controlando el Asincronismo

¿Qué se implementó en ES9?

Novedades de ECMAScript 9: Regex y Spread Operator en JavaScript

Manejo de Finally y Async en ECMAScript 9

¿Qué se implementó en ES10?

Novedades de ECMAScript 10: Métodos flat y trim en JavaScript

Manejo de Errores y Transformaciones de Arrays en JavaScript

¿Qué se implementó en ES11?

Uso de Optional Chaining en JavaScript ES11

Manejo de BigInt y operadores nullish en JavaScript

Promesas en ECMAScript 11: Uso de Promise.allSettled

Uso de Global Disk y Match All en JavaScript

Uso de Dynamic Import en JavaScript para Mejora de Rendimiento Web

¿Qué se implementó en ES12?

Características de ECMAScript 12: Separadores Numéricos y Replace All

Promesas y Métodos Privados en JavaScript: ECMAScript 12

¿Qué se implementó en ES13?

Novedades de ECMA Script 13: Uso de At en Arreglos JavaScript

Uso de Top-Level Await en JavaScript con Fake API

Recapitulación

Novedades y mejoras en ECMAScript y JavaScript

Cómo utilizar top level await