No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES13: top level await en el consumo de una API

34/35
Recursos

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

Aportes 34

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Les recomiendo esta extensi贸n de Chrome, para vizualizar los JSON est谩 incre铆ble.

https://chrome.google.com/webstore/detail/json-handle/iahnhfdhidomcpggpaimmmahffihkfnj?hl=es

si te sale error tienes que poner esto:
// Add the 鈥渢ype鈥: 鈥渕odule鈥 line in your package.json file.
{
鈥渢ype鈥: 鈥渕odule鈥
}

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鈥檚!

驴Qu茅 es una API y para qu茅 sirve?

Si les sale alg煤n error de 鈥渕odule鈥 o simplemente no carga la respuesta de la API deben poner en su archivo 鈥減ackage.json鈥

"type": "module",

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

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

馃摜 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!
*/

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

Genial el API 馃憦

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

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.

Que gran API la de platzi.

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

{ statusCode: 500, message: 鈥業nternal server error鈥 }
Hey!!

Por si les da problema hay que agregar la siguiente l铆nea en package.json ```js "type": "module" ```Quedara algo parecido a esto: ```js {聽 "dependencies": {聽 聽 "node-fetch": "^3.3.2"聽 },聽 "type": "module"} ```

Aqui les dejo una api, por si la de platzi no funciona
https://fakestoreapi.com/products

![](https://static.platzi.com/media/user_upload/image-07707042-46f6-457a-88dd-6ab69c8b299c.jpg)![](https://static.platzi.com/media/user_upload/image-01a618f1-40ed-454c-856b-05f093675d31.jpg)

POTENTE GRACIAS!

products.js

import fetch from "node-fetch";

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

export { products };

top_level_await.js

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

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

El tema de asincronismo para mi me suena dif铆cil鈥o s茅 como los m谩s experimentados lo puedieron aprender o decir que en un inicio tambi茅n les parec铆a dif铆cil. Quisiera saber sus consejos y experiencias. Gracias.

Mi resumen:

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.

Hola gente. Si les da error al correr el c贸digo, agreguen en json q se a帽ade tipo m贸dulo:
{
鈥渢ype鈥: 鈥渕odule鈥,
鈥渄ependencies鈥: {
鈥渘ode-fetch鈥: 鈥淾3.3.1鈥
}
}

no jalo

馃憥馃徏馃憥馃徏馃憥馃徏馃憥馃徏

Muy buena el top level await.
A煤n realizaba funciones para usar fetch y axios.

No sab铆a que ya podemos usar await sin async 馃槷
Qu茅 genial

me dio error siempre!!! volveree algun dia ya siendo senior a arreglarlo

Una mejor forma de usar y explicar el await.

Hola a todos. Este concepto no aplicar铆a para seguir ejecutando la pagina mientras procesa? Porque veo que tiene que responder para seguir. O como ser铆a? Gracias a todos!