ES13: top level await en el consumo de una API

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

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

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?

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",

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

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

📥 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

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.

Genial el API 👏

Que gran API la de platzi.

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.

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

Está soportado en casi todos los navegadores

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

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…no 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:

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”
}
}

no jalo

👎🏼👎🏼👎🏼👎🏼

documentación oficial al módulo node-fetch

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

https://github.com/techwithulises/javascript/commit/7a3c909ae18313e7bb2cbde19b9cbc413b9781c1

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

Una mejor forma de usar y explicar el await.