Generators

Clase 19 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

💡 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟲: 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝟭𝟲/𝟮𝟭 💡 . Un ++generador++ en JavaScript consta de una función generadora que muestra un objeto iterable Generator. La palabra reservada yield se usa para pausar y reanudar una función generadora. Fuente: aquí .

La estructura del Generador consta con la palabra function seguido de un asterísco * : function* ésta es una función generadora heredada.
El resultado que se quiere obtener se coloca al lado derecho de yield, puede ser de cualquier tipo (string, numérico, objetos, etc) y se puede tener tantos yield que se desee.

//Declaración de la función del Generador
function* gen(){
	yield 1;
	yield 2;
	yield 3;
}

Para poder iterar con el generador, se puede inicializar un valor con la función generadora:

//Expresión de la función Generadora
const g = gen();

Entre las propiedades del iterador está next():

//Llamada del método next en el objeto del Generador
console.log(g.next()); //Imprime el primer yield: {value: 1, done: false}

next() permite acceder a la función del generador y obtener con yield dos valores: ++value++ y el estado de ++done++, es decir si tenemos yield 1; y mandamos a imprimir el resultado con next() obtenemos `{value: 1, done: false}':

El 1 por el valor al lado derecho del primer yield.
Y done es false porque mientras haya otro yield por operar será falso.
Será true cuando se ejecute cuatro veces next() y la salida mostrará {value: undefined, done: true}. Ésto se debe a que ya no hay mas nada que mostrar, porque se mandó a imprimir un cuarto elemento y el generador solo tiene 3 yield. .

Para obtener solo el valor de value, se escribe next().value de ésta forma:

//Llamada del método next en el objeto del Generador
console.log(g.next().value); //Imprime el primer yield: 1
console.log(g.next().value); //Imprime el segundo yield: 2
console.log(g.next().value); 
console.log(g.next().value); //Si se coloca un cuarto console, la consola indica "Undefined"

. ✏️ ++Ejemplo usando for … of:++

//Declaración de la función del Generador pasando un argumento
function* iterate(array){
    for(let value of array){ //El loop del for revisa cada elemento del array
        yield value; //value es asignado en cada ciclo
    }
}

const it = iterate(['Oscar', 'Omar', 'Ana', 'Lucia', 'Juan']); 

//la diferencia con el ejemplo anterior es que el iterador se le pasa un argumento
console.log(it.next().value); //Imprime el primer elemento del array: Oscar
console.log(it.next().value); //Imprime el segundo elemento del array: Omar
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value); //Si se coloca un sexto console, la consola indica "Undefined"

Maria Gabriela Rodriguez Cuevas

student•

⚒️ Mi solución al reto usando la función fetchData() como un Generator:

//Platzi-Async
//Author: @marigabirodcue
//Date: 01/07/2022

import fetch from 'node-fetch';
const API = 'https://api.escuelajs.co/api/v1';
const urlApi = API;

//Declaración de fetchData como la función del Generador
async function* fetchData(url) {
	const response = await fetch(url);
	yield await response.json();
}

//Llamadas con el método next() en el objeto del Generador usando .then() y manipulando value y done
fetchData(`${urlApi}/products`).next().then(({ value, done }) => {
	console.log(value); //Imprime la lista de los Productos de la API
	
	const idProduct =value[0].id; //Extrae el id del producto que queremos manipular
 	
	console.log(`Copiame: ${urlApi}/products/${idProduct} y pegame en el navegador`);
	
	fetchData(`${urlApi}/products/${idProduct}`).next().then(({ value, done }) => {
        	
		console.log(value.title); //Imprime el Título del producto solicitado
        
		const idCategory = value.category.id;
        
fetchData(`${urlApi}/categories/${idCategory}`).next().then(({ value, done }) => {
           
			console.log(value.name); //Imprime el nombre de la categoría del producto seleccionado
        	});
    	});
});

Andres Gordon

student•

¿Cómo puedo hacer el resaltado en negrita en los aportes? Muchas gracias de antemano.

LUZ ADRIANA MARTINEZ RAMIREZ

student•

Mi solucion al reto:

Steven Javier Arevalo Poveda

student•

Qué tema usas en el editor de código?

Juan David Reyes

student•

Caballa

Pablo Gabriel Mederos Caballero

student•

Sería bueno que en lugar de tirar conceptos solamente, se explique qué uso se le daría en la vida real. No todos los que llegan a este curso tienen la experiencia suficiente, como par abstraer por sí mismos, en qué aplicar esta funcionalidad. Queda además pendiente explicar que esto genera un iterador, sus ventajas, y qué significa el done: false, del objeto que devuelve el iterator.next().

Marcelo Jorge Bellizia

student•

es lo mas importante, para que no sea tan abstracto

Santiago Perozo

student•

El done: false, significa que todavía hay mas yield por ejecutar, es decir que no ha llegado al final de la secuencia. En cambio, cuando es true quiere decir que ya no hay mas nada que ejecutar porque el iterador llego al final de la secuencia.

David Alejandro Cuastumal Bucheli

student•

Un pequeño aporte de el reto

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';

/*creamos la funcion de fetchData la cual utiliza la APi y retornamos la informacion en un tipo objeto JSON, implementando la logica de async y await, en este ejemplo
usamos una funcion tradicional*/
 const fetchData = async (urlApi) => {
    const response = await fetch(urlApi);
    const data = await response.json();
    return data;
}

/*creamos la funcion que realiza las solicitudes en este caso usaremos tambien yield y el "*"" al lado de function para identificar un generator
Tambien usamos async y await para hacer el llamado de los productos y demas */
async function* anotherFunction (urlApi) {
    const products = await fetchData(`${urlApi}/products`);
    const product = await fetchData(`${urlApi}/products/${products[0].id}`);
    const category = await fetchData(`${urlApi}/categories/${product.category.id}`);

    //Se utiliza yield para dar una pausa a la ejecucion y utilizamos .next() para dar inicio a el codigo
    yield console.log(products);
    yield console.log(product.title);
    yield console.log(category.name);
}

const g = anotherFunction(API);
g.next().value;
g.next().value;
g.next().value;

Woldev S.A.S

student•

Creo que aquí no es necesario añadir la propiedad .value ya que no estás llamando con yield un valor sino una expresión. Lo digo ya que corrí este código sin el value y muestra exactamente lo mismo... ¿Alguien que pueda brindar una explicación más precisa de por qué añadir .value en este caso no cambia nada?

Yerson David Aguilar Martinez

student•

@Woldev tal cual como lo dijiste, El g.next() devuelve una promesa, concretamente nos regresa lo que esta a la derecha de la palabra yield en este caso solo hay un console.log(), eso no es un valor, es una ejecución de código, entonces nuestro g.next() tiene el valor:

Promise { { value: undefined, done: false } }

Cuando accedes a .next().value estas accediendo a undefined, podrías poner cualquier propiedad que quieras, por ejemplo g.next().cangrejito e igual tendrás el mismo resultado (undefined), eso si, no trates de acceder mas allá, por ejemplo: g.next().cangrejito.patita porque .cangrejito al igual que .value tienen el valor undefined y no puedes acceder a una propiedad de algo que no esta definido.

En fin, como no estas haciendo nada con tus llamadas a g.next(), o sea no las estas guardando para despues ni nada, solo esta activando el console.log() da igual lo que pongas, mientras llames al g.next() todo funcionará igual.

Carlos Andrés Norato Gómez

student•

Reto resuelto💚

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';


function getData(urlAPI){
    return fetch(urlAPI)
}

 
async function anotherFunction(urlAPI){
    const response = await getData(urlAPI)
    const data =  await response.json()
    return data;
}



async function* iterateGet(){
   const products = await anotherFunction(`${API}/products`);
   const product = await anotherFunction(`${API}/products/${products[0]?.id}`);
   const category = await anotherFunction(`${API}/categories/${product?.category?.id}`);

   yield console.log(products);
   yield console.log(product.title);
   yield console.log(category.name);

}

const g = iterateGet()

g.next().value;
g.next().value;
g.next().value;

Paul Martin Vargas Portugal

student•

Yo lo intenté, pero no cambié el apiUrl pero al cambiarlo como tu a ${API} si me funcionó, porque llegaste a cambiar o mejor dicho, porque funciona ese cambio. Toy chiquito

Fabian Bejarano González

student•

Te sobra una función, podrías resumirla en la segunda, pero usando fetch directamente:

const fetchData = async (urlApi) => {
    const response = await fetch(urlApi);
    const data = await response.json();
    return data;
}

Y tambien la idea es que las funciones tengan parametros para que sean reutilizables. Digamos que tienes dos APIS, const API y const API2. En tu ejemplo tu función si o si usa API y no sería posible usar API2. Sería más reutilizable de la siguiente manera:

async function* gettingData (urlApi) {

        const products = await fetchData(`${urlApi}/products`);
        const product = await fetchData(`${urlApi}/products/${products[0].id}`); 
        const category = await fetchData(`${urlApi}/categories/${product.category.id}`);
        

        yield console.log(products.length);
        yield console.log(product.title);
        yield console.log(category.name);

}

Yo sufrí mucho con el yield, pero tu solución me dio lo que me faltaba.

Max Andy Diaz Neyra

student•

Aqui les dejo informacion sobre las funciones generadores del MDN:

Los generadores son funciones de las que se puede salir y volver a entrar. Su contexto (asociación de variables) será conservado entre las reentradas.
La llamada a una función generadora no ejecuta su cuerpo inmediatamente; se devuelve un objeto iterador para la función en su lugar.
Cuando el metodo next() del iterador es llamado , el cuerpo de la función generadora es ejecutado hasta la primera expresión yield, la cual especifica el valor que será retornado por el iterador o con, yield*, delega a otra función generadora.
El método next() retorna un objeto con una propiedad value que contiene el valor bajo el operador yield y una propiedad done que indica, con un booleano, si la función generadora ha hecho yield al último valor.

Angel David Contreras Barrios

student•

Reto:

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';

async function fetchData(urlApi){
    const response = await fetch(urlApi);
    const data = await response.json();
    return data;
}

async function* iterData (urlApi){
    try{
        const products = await fetchData(`${urlApi}/products`);
        yield console.log(products[12]);

        const product = await fetchData(`${urlApi}/products/${products[0].id}`);
        yield console.log(products[20]);

        const category = await fetchData(`${urlApi}/categories/${product.category.id}`);
        yield console.log(products[30]);

        
        console.log('Finalizo');

    } catch (error) {
        console.log(error);
    }
}
const res = iterData(API);
res.next();
res.next();
res.next();
res.next();

Andrés Felipe Eslava Zuluaga

student•

Gracias a tu ejemplo entendí!

Julian Ward

student•

Tu codigo esta bien y funciona, pero en este caso no era necesario las constantes product y category, ya que no haces uso de ellas y solo usas products

Fritza Véliz

student•

Aquí dejo el desarrollo que realicé para el desafío :) ![](

Jovanny Alarcon C

student•

por que es que se usa el * (function*) ???

Jovanny Alarcon C

student•

function* La declaración function* (la palabra clave function seguida de un asterisco) define una función generadora, que devuelve un objeto Generator.

También puedes definir funciones generadoras usando el constructor GeneratorFunction y una function* expression.

Andre Huaman Yovera

student•

Permíteme explicarte sobre los generadores en JavaScript y darte un ejemplo práctico. . En JavaScript, un generador es una función especial que puede pausar su ejecución y luego reanudarla en un punto específico. A diferencia de una función regular, que se ejecuta de principio a fin y devuelve un valor final, un generador puede producir una secuencia de valores a medida que se va ejecutando. Estos valores se generan uno por uno, bajo demanda, lo que hace que los generadores sean útiles para trabajar con colecciones de datos grandes o para generar secuencias infinitas. . Los generadores en JavaScript se definen utilizando la sintaxis de función de generador, que se ve así:

function* miGenerador() {
  // Código del generador
  yield valor;
  // Más código del generador
}

La palabra clave function* indica que estás creando una función generadora. Dentro del generador, puedes utilizar la palabra clave yield para pausar la ejecución y devolver un valor. El generador se reanuda cada vez que se llama a next() en el objeto generado, y la ejecución continúa desde el punto donde se hizo la pausa. . Aquí tienes un ejemplo práctico para comprenderlo mejor. Supongamos que deseas generar una secuencia de números pares utilizando un generador:

function* generadorNumerosPares() {
  let num = 0;
  while (true) {
    yield num;
    num += 2;
  }
}

const miGenerador = generadorNumerosPares();

console.log(miGenerador.next().value); // Salida: 0
console.log(miGenerador.next().value); // Salida: 2
console.log(miGenerador.next().value); // Salida: 4
console.log(miGenerador.next().value); // Salida: 6

En este ejemplo, creamos un generador llamado generadorNumerosPares(). Utilizamos un bucle while (true) para generar infinitos números pares. En cada iteración, pausamos la ejecución con yield y devolvemos el número actual. Luego, incrementamos el número en 2 para la siguiente iteración. . Al llamar a next() en el objeto generado miGenerador, obtenemos el siguiente valor de la secuencia. Cada llamada a next() reanuda la ejecución del generador desde el punto donde se hizo la pausa, generando así una secuencia infinita de números pares. . Espero que este ejemplo te haya ayudado a comprender mejor los generadores en JavaScript. Si tienes más preguntas, no dudes en hacerlas.

Max Andy Diaz Neyra

student•

Mi solucion seria la siguiente:

En los navegadores modernos, await de nivel superior funciona, siempre que estamos dentro de un módulo.
Tam

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';

async function fetchData (urlApi){ 
    const res   = await fetch(urlApi); 
    const data  = await res.json();
    return data; 
}

async function* anotherFn(urlApi){
    try {
        const products  = await fetchData(`${urlApi}/products`);
        yield products[0];

        const product   = await fetchData(`${urlApi}/products/${products[0].id}`);
        yield product.title;

        const category  = await fetchData(`${urlApi}/categories/${product?.category?.id}`);
        yield category.name

    } catch (err) { 
        console.error(err);
    }
}

let promiseGenerator = anotherFn(API)

console.log((await promiseGenerator.next()).value)
console.log((await promiseGenerator.next()).value)
console.log((await promiseGenerator.next()).value)

Otra forma mas soportanda por navegadoes antiguos

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';

async function fetchData (urlApi){ 
    const res   = await fetch(urlApi); 
    const data  = await res.json();
    return data; 
}

async function* anotherFn(urlApi){
    try {
        const products  = await fetchData(`${urlApi}/products`);
        yield products[0];

        const product   = await fetchData(`${urlApi}/products/${products[0].id}`);
        yield product.title;

        const category  = await fetchData(`${urlApi}/categories/${product?.category?.id}`);
        yield category.name

    } catch (err) { 
        console.error(err);
    }
}

async function aux(urlApi){
    let promiseGenerator = anotherFn(urlApi)

    console.log((await promiseGenerator.next()).value)
    console.log((await promiseGenerator.next()).value)
    console.log((await promiseGenerator.next()).value)
    
}

aux(API)

diego gomez

student•

Estuve intentando hacer el ejemplo con forEach para hacer el recorrido del array y me dio error, no sé si lo hice mal o la sintaxis del generator debe ser exactamente con el ciclo forOf

Agustín De La Vega

student•

Yo también lo hice y tampoco me funciono, a lo mejor no se puede usar con forEach. Aquí hay un foro donde discutieron este tema: foro

thiago carrea

student•

¿Como hago para que se recorran todos los yields automaticamente? es decir sin tener que escribir toda la cantidad de yields que existen

console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);

asi quedo el recorrido de mi array, imaginense en un proyecto jajaja

Kevin J. Zea Alvarado

student•

Hola, Thiago. 👋

De manera simple, se podría usar un foor loop o while para recorrer todos los yield de la función generadora. Sin embargo, no suele ser ése el uso práctico de los generators.

Te dejo aquí un video donde se explica cómo funcionan y algunos de sus usos prácticos.

Ulqernesh Karvenae

student•

📣 Utilizando Generadores en JavaScript

. En la programación con JavaScript, los generadores pueden marcar una gran diferencia al manejar operaciones costosas o trabajar con grandes cantidades de datos. .

🚀 Producir y procesar 'bajo demanda': En lugar de generar todos los datos de una vez (lo que puede agotar memoria y recursos), los generadores nos permiten producir y procesar datos 'bajo demanda'. Esto significa que cada dato se genera justo cuando lo necesitamos, optimizando el uso de memoria y distribuyendo la carga de trabajo a lo largo del tiempo. . Esto es particularmente útil para:
- Manejo de grandes conjuntos de datos
- Creación de flujos de datos infinitos
- Gestión eficiente de paginación de datos .
⏱ Optimización de operaciones asíncronas costosas: Imagina que tienes un array de 30 elementos, y cada uno tarda 2 segundos en cargarse. Si utilizas un bucle for o forEach, tendrías que esperar un minuto completo para procesar todos los elementos. Pero con un generador, puedes comenzar a trabajar con cada elemento tan pronto como esté disponible, es decir, cada 2 segundos, sin tener que esperar a que todos estén listos. . Esto optimiza tu código y mejora la experiencia del usuario al brindar respuesta inmediata con cada elemento cargado, en lugar de hacerlo esperar hasta que todo esté listo. 💡 . Recuerda: los generadores son solo una de las herramientas en tu caja de herramientas de JavaScript. ¡Úsalos donde sea apropiado para hacer tu código más eficiente y fácil de entender! .

Luis Alfredo Suarez

student•

19/26 Curso de Asincronismo: Generators

Los generadores en JavaScript son una característica que permite crear funciones especiales que pueden pausar su ejecución y luego reanudarla más tarde. Esto es útil para trabajar con secuencias de datos potencialmente largas, como bucles infinitos o grandes conjuntos de datos, sin bloquear la ejecución del programa. Los generadores se crean utilizando la palabra clave function seguida de un asterisco *, y se utilizan para producir valores de manera incremental a medida que se solicitan.
Aquí tienes un ejemplo simple de cómo se define y utiliza un generador en JavaScript:

function* generadorSimple() {
  yield 1;
  yield 2;
  yield 3;
}

// Crear una instancia del generador
const generador = generadorSimple();

// Llamar al generador para obtener valores uno a uno
console.log(generador.next().value); // Imprime 1
console.log(generador.next().value); // Imprime 2
console.log(generador.next().value); // Imprime 3
console.log(generador.next().value); // Imprime undefined (se han agotado todos los valores)

En el ejemplo anterior, la función generadorSimple es un generador que produce los números del 1 al 3 utilizando la palabra clave yield. La función next() se utiliza para obtener el siguiente valor producido por el generador. Cuando el generador se agota, next() devuelve un objeto con la propiedad value igual a undefined.
Los generadores son especialmente útiles en situaciones donde se necesita procesar grandes cantidades de datos de forma eficiente o cuando se deben realizar operaciones de forma asíncrona, como en el caso de las promesas y la programación asincrónica.
Puedes usar generadores para crear iteradores personalizados y para simplificar el código en ciertos casos, especialmente cuando se trabaja con flujos de datos complejos.

Espero sea de utilidad. 👨‍💻

Luis Hernando Sendoya Serrato

student•

De una forma breve, obtuve la data de categorías. Por supuesto se podría agregar nuevas peticiones.


import axios from "axios";

const URL = ' https://api.escuelajs.co/api/v1/categories';

async function* getData() {
    const data = await axios.get(URL);
    yield console.log(data);
}

const g = getData();
console.log(g.next().value)

Alejandro Sebastian Dubon Estrada

student•

const BASE_URL = 'https://api.escuelajs.co/api/v1';

const fetchData = async (urlApi) => {
    try {
        const response = await fetch(urlApi);
        return await response.json();
    } catch (error) {
        console.error(error);
    }
};


function* arrayGenerator(array = []) {
    for (const value of array) {
        yield value;
    }
}

function* requester() {
    yield fetchData(`${BASE_URL}/products?offset=0&limit=5`);
    yield fetchData(`${BASE_URL}/products/1`);
    yield fetchData(`${BASE_URL}/categories/2`);
}

// ------------------------------------------------------------


async function main() {
    
    // case 1 - iterate over an array of products
    const products = await fetchData(`${BASE_URL}/products?offset=0&limit=5`);
    const product  = await fetchData(`${BASE_URL}/products/${products[0].id}`);
    const category = await fetchData(`${BASE_URL}/categories/${product.category.id}`);
    
    const productsIterator = arrayGenerator(products);

    console.log(productsIterator.next().value);
    console.log(productsIterator.next().value);
    
    // case 2 - iterate over an array of promises
    const requestsIterator  = arrayGenerator(await Promise.all([
        fetchData(`${BASE_URL}/products/17`),
        fetchData(`${BASE_URL}/products/30`),
        fetchData(`${BASE_URL}/products/51`),
    ]));

    console.log(requestsIterator.next().value);
    console.log(requestsIterator.next().value);
    console.log(requestsIterator.next().value);

    // case 3 - generator of requests
    const requesterIterator = requester();

    console.log(await requesterIterator.next().value);
    console.log(await requesterIterator.next().value);
    console.log(await requesterIterator.next().value);
}

main();

Angel Daniel Almanza Trejo

student•

Mi solución al reto

import fetch from "node-fetch";
const API = 'https://api.escuelajs.co/api/v1';

const fetchData = async (urlApi) => {
  const response = await fetch(urlApi);
  const data = await response.json();
  return data;
}

async function* anotherFunction() {
  const products = await fetchData(`${API}/products`)
  yield products;
  const product = await fetchData(`${API}/products/${products[0].id}`);
  yield product;
  const category = await fetchData(`${API}/categories/${product.category.id}`);
  yield category;
}

const info = anotherFunction();

info.next().then((response) => console.log(response.value)).catch((error) => console.error(error));
info.next().then((response) => console.log(response.value.title)).catch((error) => console.error(error));
info.next().then((response) => console.log(response.value.name)).catch((error) => console.error(error));

Usuario anónimo

user•

function* gen() {
    yield 1;
    yield 2;
    yield 3;
}

const g = gen();
console.log(g.next().value);
console.log(g.next().value);
console.log(g.next().value);
//con la propiedad .netx se van recorriendo los yield por lo que en cada ocasión nos da un valor diferente

function* iterate(array){
    for (let value of array) {
        yield value
    }
}

const it = iterate(['oscar', 'dante', 'ana', 'lucia', 'juan'])
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value);
console.log(it.next().value); //como no hay siguiente valor arroja undefined

Raycris Maldonado

student•

Me quedo con la duda de como esto de generators me puede servir ya en el ambito loboral, no encuentro un ejemplo practico para entenderlo. Alguien sabe un ejemplo en del campo laboral?

Alan Cabrera

student•

Aquí hay un comentario de un compañero que te puede ayudar. Saludos! :)

Raycris Maldonado

student•

Gracias Alan. saludos!