Playground: Obtén una lista de películas

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

Clase anteriorSiguiente clase

Martin Salomon

student•

alguien mas hace ctrl + s a cada rato?

Cristian David Corrales Ospina

student•

Obvio, a lo pendejo jajaja

Moises Yañez Villa

student•

si jaja

Elena Fernandez López

student•

Para recordar, en este caso el import se hace con { } porque no se hizo el export default getData en el archivo api.js. Si se hubiera hecho, simplemente sería, import getData from "./api.js";

import { getData } from "./api.js";

export function solution() {
  // Tu código aquí 👈
  return getData();
}

Daniel Gomes Vilaca

student•

Tengo la extraña sensación de que Juan dc está detrás de este ejercicio xD

Beder Danilo Casa Condori

student•

muy cierto

Leopoldo Martinez

student•

Por si alguien lo necesita saber, el ejercicio dice que el código debe escribirse dentro de la función (// Tu código aquí 👈) pero no es obligatorio, deben escribir el import al principio del ejercicio. Deben bajar la función y en una línea superior hacer el import que se necesita.

Mauricio Poveda Macias

student•

<import { getData } from "./api.js";

export function solution() {
  return getData().then(list => list);
}>

Jose Barboza

student•

import { getData } from './api'
export async function solution() {
  return await getData();
}

sebasmira97

student•

Hola me podrias explicar porfavor por que el import getData debe llevar { }?

Jefferson Ramos

student•

A veces no dejaba dar a 'correr pruebas' pero se logro.

import getData from "./api.js" 

export function solution() {
  return getData();
}

VICTOR CAUDILLO

student•

Esta buenisima esto, ahora bien la comunidad ayuda mucho con sus aporte, pero creó que si van a poner ejemplo deberian basarse con los videos, en los comentarios uno aprende mas cosa y esta buenisimo pero esa forma de exportar y async no recuerdo que estuvieran en las clases previas

walter alturo

student•

Esta re bueno 100/10 ya era hora de implementar esto ojala hagan muchos mas ejercicios de este tipo que hacen falta

Cindy Carolina Campos Navarro

student•

Me hace sentir como que estoy respondiendo preguntas de una empresa para un empleo de progra... :)

Edgar Gerardo Rojas Medina

student•

Para importar funciones se utilizan {} despues del import. Ex: import {miFunc} from './file.js'

Sabad Josue Perez Rodriguez

student•

La forma de importar la función dependerá de como fue exportada. Comparto estas 2 formas de Importar/Exportar posteadas por el amigo Irving Caamal en la clase pasada

export default myFunction;
export {myFunction};

import myFunction from "./myFunction"
import {myFunction} from "./myFunction"

Victor Manuel Urdaneta Contreras

student•

Creo que eso debió explicarlo Oscar en las clases.

Duvan Alexis Palomino Ramirez

student•

Mi solucion: al archivo api.js le agrego la parte del export

mi archivo exercise queda asi:

si no le agrego el export default a mi archivo api.js cuando importe la funcion debo poenrla dentro de {} asi import { getData} from "./api.js";

JOSE DAVID OROZCO CASTAÑEDA

student•

Una solucion mas entedible con la sintaxis del las clases anteriores.

// main.js
import { getData } from "./api.js";
export function solution() {

  const solucion = getData()
    .then((response) => response)
    .catch();
  return solucion;
}

Ricardo Alfonso Chavez Vilcapoma

student•

Se supone que en promesas al llamar a la función que la contiene necesariamente debe tener el .then y .catch. ¿Por qué compila sin error al solo mandar el return getData();?

Deiber Orlando López Moyano

student•

Totalmente perdido en el ejercicio ya trate con el siguiente codigo : en exercise.js export function import { getData } from './ api.js;' solution() { // Tu código aquí 👈 return getData(); } y en api.js export { getData };

No entiendo por se debe usar export en la function solution, y tampoco por que estan usando los valores de then. y catch me podrian explicar ?

Luis Castillo

student•

Asi fue como solucioné el ejercicio y "corri pruebas" con éxito.import { getData } from './api.js'export function solution() { const movies = getData(); return movies;} solution();```js import { getData } from './api.js' export function solution() { const movies = getData();

return movies; }

solution();

Esteban Vladimir Alvarenga Gutiérrez

student•

¿Qué función cumplen las llaves conteniendo a getData? import { getData } from... Supongo que será porque se está trabajando en una consola del navegador, pero no me terminó de comprender 🤨 Al no ponerlas ocurre un SyntaxError, pero tampoco se explicó en la clase.

Arturo Vargas

student•

Cómo la función no fue exportada como default entonces hay que usar los {}. La documentación me ayudo a entender el tema

LESTHER XITUMUL MANUEL

student•

interesante

Alejandro Barriga Gasca

student•

No entiendo como usar esto XD alguien me ayuda?

Leonardo de los angeles Espinoza Hernandez

student•

¡Hola Alejandro!

Específicamente en que tienes dudas?

Lo único que debes hacer es resolver el problema que se te muestra en el apartado de Guía con código, todo el código lo debes escribir del lado izquierdo, una vez completado deberás darle click al botón de "Correr pruebas" y si todo sale bien tendrás todo en verde :D

Y si no sabes la solución, no te preocupes! El botón de Ver solución se desbloqueará después de 3 intentos fallidos y podrás verla

Pero si esto no te parece muy intuitivo o te sientes perdido por alguna razón, házmelo saber y te sigo ayudando 💪

Alejandro Ramos

student•

Ok, este es el código que resuelve esto, pero pq

import { getData } from "./api.js"; //un import, las llaves son importantes
export async function solution() { //async pq es asincronico¿?
  return await getData(); //await pq hay q esperar ??????
}

Ulqernesh Karvenae

student•

Yo lo hice de esta manera

import getData from "./api.js" 

export function solution() {
  return getData();
}

En tu solución, donde usas async/await, la función solution() "espera" a que la Promesa devuelta por getData() se resuelva o rechace. Si getData() arroja un error (la promesa se rechaza), ese error será propagado por solution(). De este modo, el manejo del error se hace donde sea que llames a solution(). La función solution() en sí misma no maneja el error.
En la segunda solución, solution() simplemente devuelve la promesa que obtiene de getData() sin esperar a que se resuelva. Esto significa que solution() se completa antes de que la promesa se resuelva o se rechace. Si la promesa es rechazada (hay un error), la función solution() devolverá una promesa rechazada. Una vez más, el manejo de este error queda a cargo de quien llame a solution(). .

Ejemplo : La promesa tarda 10 años en ejecutarse, entonces pasaría lo siguiente

En el primer caso, sí, si la promesa se resuelve en 10 años, la función solution() esperará 10 años antes de completarse y devolver el resultado.
En el segundo caso, solution() se completa inmediatamente, devolviendo la promesa que fue retornada por getData(). Esa promesa estará en estado pendiente hasta que se resuelva, incluso si eso lleva 10 años.

Alejandro Ramos

student•

Gracias por tu explicación, Ultisaer, ha sido genial!

JORGE MANRIQUE CHAVARRO

student•

Esta fue mi solución.

api.js

export async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

getData()
    .then(response => console.log(response))
    .catch(err => console.log(err));

export default getData;

exercise.js

import getData from "./api.js";

export function solution() {
  // Tu código aquí 👈
  return getData();
}

solution();

Ricardo Alfonso Chavez Vilcapoma

student•

Mi solución...no entiendo porque agregan async si se está usando promesas 😜.

Aunque sin then ni catch también compila. Ni idea pero lo hace.

Felipe Moreno

student•

api.js

export default async function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{
                movie: "El despertar de los michis",
                year: 2021,
                protagonist: "Mr. Michi"
            }, {
                movie: "101 Michis",
                year: 2019,
                protagonist: "Tommy Michiguire"
            }]);
        }, 1000);
    });
}

exercise.js

import getData from './api.js';
export function solution() {
  return getData().then(res => res) // Tu código aquí 👈
}

Playground: Obtén una lista de películas

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