ES9: Promise.finally

En el minuto 2:53 dice que no entro en el catch… OJO esto puede confundir! Si entro en el catch!..

Se genero un reject porque la condicion era false, por lo cual el catch lo ataja…

Una manera de verlo podria ser agregar marca en los console.log y probar los 2 casos…

const anotherFunction = () => {
    return new Promise((resolve, reject) => {
        if (true) {
            resolve("Hey");
        } else {
            reject("Whooops!");
        }
    })
}

anotherFunction()
    .then(response => console.log('Then...' + response))
    .catch(err => console.log('catch...' + err))
    .finally(()=> console.log('Finally'));

Nuevamente, siento que este concepto lo podemos ver como un lifecycle también.

Malisima la parte del minuto 07:30 donde nos manda a probar algo que no funciona y en lugar de corregir el error vuelve atras…
Toda la parte de asincronismo en este curso es de muy mala a pesima!
O lo ponen despues del curso de asincronismo o lo editan. En realidad opino que ambas.

.finally es util cuando quieren hacer una acción sin importar si la respuesta fue correcta o no. Tal vez el cierre de una conexión a BD o actualizar un estado de loading cuando hicieron una llamada a la base de datos

Hola Chicos 😃

ES9

• Finally

const anotherFuncion = () => {
    return new Promise((resolve, reject) => {
        if (false) {
            resolve("hey!!");
        } else {
            reject ( "whooooops!");
        }
    })
}

anotherFuncion()
.then(response => console.log(response))
.catch(err => console.log(err))
.finally(() => console.log("finally"));

• Async

async function* anotherGenerator() {
    yield await Promise.resolve(1);
    yield await Promise.resolve(2);
    yield await Promise.resolve(3);
}

const other = anotherGenerator();
other.next().then(response => console.log(response.value));
other.next().then(response => console.log(response.value));
other.next().then(response => console.log(response.value));
console.log("hello");

async function arrayOfNames(array) {
    for await (let value of array) {
        console.log(value);
    }
}

const names =arrayOfNames(["Alexa", "Oscar", "David"]);
console.log("After");

No explica nada bien

Algo que no dijo el instructor, es que si vuelves a llamar la funcion con next, te devuelve undefined.

El finally se ejecuta Despues de que la promesa ocurre, independientemente si hubo un resolve o reject, si la promesa no ocurre entonces no entra en finally, para entenderlo agregue un setTimeout(), y probe con true y false:

const anotherFunction = () => {
    return new Promise((resolve, reject) => {
        if (true) {
            setTimeout(() => resolve('Hey!!'), 2000)
        } else {
            setTimeout(() => reject("Whooops!"), 5000)
        }
    })
}

anotherFunction()
    .then(response => console.log('Then...' + response))
    .catch(err => console.log('catch...' + err))
    .finally(()=> console.log('Finally'));

Modificación del código

En el minuto 7:00 le sale un error al profesor,le faltó mover el .value antes del .then().
Cuando usamos asyncy await en el generador, el .next() nos devuelve una promesa, pero cuando lo quitamos y se vuelve un generador normal, el .next() retorna un objeto con 2 propiedades, en nuestro caso:

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

el value contiene lo que retornamos con yield, la propiedad done indica si aún tenemos valores para devolver con .next()

dicho esto, para que funcione como debería solo tenemos que aumentar el .value antes del .then()

function* generator(){
    yield Promise.resolve(1);
    yield Promise.resolve(2);
    yield Promise.resolve(3);
}

const other = generator();
other.next().value.then(resp => console.log(resp));
other.next().value.then(resp => console.log(resp));
other.next().value.then(resp => console.log(resp));
console.log('Hello!');
/*Output: 
Hello!
1
2
3
*/

Nunca entendí como para qué nos hizo quitar async y await, y luego no corrió y lo regresó como estaba antes. No sé qué pasó ahí o qué se pretendía probar. ¿Alguien me puede explicar?

Gente, la unica manera que mejoren este tipo de cursos es puntuarlos con la minima calificacion, de otra manera no creo que se den cuenta de lo que estan publicando.

Casi casi vuelve a hacer la performance de pasar del ejercicio 2 al 3!! Se ve por pequeños momentos , pero lo corrige en plena grabación.

¿Cual serán los misterios que atañan a la simbología numerológica del 2? ¿Puede considerarse un ejercicio maldito?

async retorna un objeto Promise, por eso si funciona si quitamos el await

async function* generator(){
    yield Promise.resolve(1)
   yield Promise.resolve(2)
   
    
}

const gen= generator()

gen.next().then(x=>console.log(x.value))
gen.next().then(x=>console.log(x.value))

Promise.finally() es un método que se utiliza con promesas en JavaScript. Este método se encarga de agregar una función de devolución de llamada (callback) que se ejecutará siempre, ya sea que la promesa se resuelva o se rechace. En otras palabras, Promise.finally() te permite ejecutar código una vez que una promesa haya terminado su ejecución, independientemente de si se resuelve o se rechaza. Esto es útil para realizar tareas de limpieza o acciones que deben realizarse en cualquier caso, como cerrar recursos o manejar errores finales.
La sintaxis básica de Promise.finally() es la siguiente:

miPromesa
  .then(resultado => {
    // Hacer algo con el resultado si la promesa se resuelve
  })
  .catch(error => {
    // Manejar el error si la promesa se rechaza
  })
  .finally(() => {
    // Código que se ejecutará siempre, tanto si la promesa se resuelve como si se rechaza
  });

Aquí hay un ejemplo más completo:

const miPromesa = new Promise((resolve, reject) => {
  // Simulamos una operación asincrónica exitosa
  setTimeout(() => {
    resolve('¡Promesa resuelta!');
  }, 1000);
});

miPromesa
  .then(resultado => {
    console.log(resultado);
  })
  .catch(error => {
    console.error('Error:', error);
  })
  .finally(() => {
    console.log('Operación finalizada, independientemente de si se resuelve o se rechaza.');
  });

En este ejemplo, el código dentro del bloque .finally() se ejecutará siempre, ya sea que la promesa se resuelva o se rechace. Puedes usarlo para realizar acciones como limpieza de recursos o registro de eventos independientemente del resultado de la promesa.

Promise.finally() es especialmente útil cuando deseas asegurarte de que ciertas acciones se realicen en cualquier caso, lo que mejora la gestión y la predictibilidad del flujo de tu código.

Al eliminar el await del generador siguió ejecutando bien 😒

Aprendí este método de finally a las malas en la empresa que trabajo como Frontend y, es que debía colocar una animación de ‘cargando’ mientras la API hacía el proceso de traer la data y, fue justamente con el finally y un switch de clases que pude lograr esa tarea :3

ES9: Promise.finally

ES9 introdujo el método finally para objetos Promise en JavaScript. Este método se utiliza para especificar un bloque de código que se ejecutará siempre, sin importar si la promesa se resuelve o se rechaza. En otras palabras, el bloque de código dentro de finally se ejecutará después de que la promesa haya sido resuelta o rechazada, independientemente del resultado.

Aquí tienes un ejemplo de cómo se usa Promise.finally en JavaScript:

const miPromesa = new Promise((resolver, rechazar) => {
    // Simulamos una operación asíncrona
    setTimeout(() => {
        resolver("¡Promesa resuelta!");
    }, 1000);
});

miPromesa
    .then(resultado => {
        console.log(resultado);
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        console.log("Esto se ejecutará sin importar el resultado de la promesa.");
    });

En este ejemplo, el bloque de código dentro de finally se ejecutará después de que la promesa miPromesa se resuelva o rechace, lo que garantiza que ciertas tareas de limpieza o acciones finales se realicen, independientemente del resultado de la promesa.

Más ejemplos:

Ejemplo 1:

Imagina que estás haciendo un trato con alguien, pero no estás seguro de si el trato funcionará o no. En este caso, estás usando una “promesa”. Ahora, piensa en el bloque finally como si fuera un paso que siempre debes hacer, sin importar si el trato funcionó o no.

Por ejemplo, imagina que haces un trato con un amigo para encontrarse en un parque a una hora específica. Pase lo que pase, al final, quieres asegurarte de que tu amigo sepa que llegaste al parque, incluso si llegaste tarde o si no pudiste llegar. En términos de programación, usarías finally para asegurarte de que algo suceda sin importar si el trato (la promesa) fue exitoso o no.

Así que, en el código:

const miPromesa = new Promise((resolver, rechazar) => {
    // Imagina que aquí hay algo que toma un tiempo, como llegar al parque
    // Puede ser exitoso (resolver) o fallar (rechazar)
});

miPromesa
    .then(resultado => {
        // Esto es como decir "¡Llegué al parque a tiempo!"
    })
    .catch(error => {
        // Esto es como decir "No pude llegar al parque"
    })
    .finally(() => {
        // Esto es como decir "Siempre quiero decirle a mi amigo que llegué, sin importar qué"
    });

En este ejemplo, el código dentro de finally siempre se ejecutará, sin importar si la promesa fue exitosa o falló. Es una forma útil de asegurarte de que se realice una acción final, como contarle a tu amigo que llegaste al parque, sin importar lo que pase con el trato en sí.

Ejemplo 2:

Aquí tienes otro ejemplo usando una metáfora diferente:

Imagina que estás cocinando algo en la cocina. Tienes una tarea importante al final: asegurarte de limpiar y ordenar la cocina, sin importar si la comida resultó deliciosa o si algo salió mal en la receta. En términos de programación, podríamos usar finally para representar esta tarea final que siempre se realiza.

const cocinarComida = () => {
    return new Promise((resolver, rechazar) => {
        // Aquí cocinaríamos algo, puede salir bien o mal
        const resultado = Math.random() < 0.5; // Simulamos éxito o fracaso

        if (resultado) {
            resolver("¡Comida deliciosa!");
        } else {
            rechazar("Algo salió mal en la cocina");
        }
    });
};

cocinarComida()
    .then(resultado => {
        console.log(resultado);
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        console.log("Limpio y ordenado, ¡siempre!");
    });

En este ejemplo, el bloque de código dentro de finally se ejecutará sin importar si la comida resultó deliciosa o si hubo un problema en la cocina. Es como decir que siempre quieres asegurarte de dejar la cocina en buen estado, independientemente del resultado de la preparación de la comida.

Espero sea de utilidad. 👨‍💻

Increíble la cantidad de errores que tiene esta clase, lo peor de todo es que hay comentarios de hace 9 meses, 6 meses que recalcan los errores del profesor y Platzi no actualiza las clases…

Ok, está bien, todos somos humanos y nos equivocamos, pero esta es una escuela, y si los alumnos notas los errores y los hacen públicos, al menos se espera que la plataforma revise el feedback y haga la respectiva actualización…

Sin palabras Platzi, me pregunto si realmente leen los comentarios o de nada sirve…

OJO! si ponemos ; en .then o .catch, nos larga error. aparentemente en este caso si importan los ; je

medueleelcerebeloxd

pero tan interesantes las clases 😄

Ejemplo Panaderia

Ejemplo de cómo se podrían utilizar las funciones asíncronas en un escenario relacionado con una panadería, donde se realiza un pedido de productos de manera asíncrona:

// Simulación de productos de la panadería
const bakeryProducts = [
  { id: 1, name: 'Pan de trigo', price: 2.5 },
  { id: 2, name: 'Croissant', price: 1.75 },
  { id: 3, name: 'Tarta de manzana', price: 10.0 }
];

function getBakeryProduct(productId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const product = bakeryProducts.find(p => p.id === productId);

      if (product) {
        resolve(product);
      } else {
        reject(new Error('El producto no está disponible en la panadería.'));
      }
    }, 1000);
  });
}

async function placeOrder() {
  try {
    console.log('Iniciando el pedido...');
    const product1 = await getBakeryProduct(1);
    console.log(`Producto 1: ${product1.name}`);

    const product2 = await getBakeryProduct(2);
    console.log(`Producto 2: ${product2.name}`);

    const product3 = await getBakeryProduct(3);
    console.log(`Producto 3: ${product3.name}`);

    console.log('Pedido completado.');
  } catch (error) {
    console.error(`Error al realizar el pedido: ${error.message}`);
  }
}

placeOrder();

En este ejemplo, tenemos un array ficticio llamado bakeryProducts que contiene productos de una panadería. La función getBakeryProduct(productId) simula una solicitud asíncrona para obtener un producto específico a partir de su productId. Utilizamos setTimeout para simular una demora de 1 segundo antes de resolver o rechazar la promesa, y luego buscamos el producto correspondiente en el array bakeryProducts.

La función placeOrder() es una función asíncrona que representa el proceso de realizar un pedido en la panadería. Dentro de ella, utilizamos await junto con getBakeryProduct() para obtener los productos de forma secuencial y esperar a que cada solicitud asíncrona se resuelva antes de continuar con la siguiente.

En el bloque try, mostramos en la consola el progreso del pedido, obteniendo y mostrando los nombres de los productos solicitados. Si ocurre algún error durante el proceso de obtención de los productos, se captura en el bloque catch y se muestra un mensaje de error.

Al ejecutar el código, obtendríamos la siguiente salida:

Iniciando el pedido...
Producto 1: Pan de trigo
Producto 2: Croissant
Producto 3: Tarta de manzana
Pedido completado.

📝 Archivos del Proyecto 📝

Pasos 📌

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

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

//Ejercicio #1
const anotherFunction = () => {
	return new Promise((resolve, reject) => {
		if(true) {
			resolve('Hey!!');
		} else {
			reject('Whoooops!');
		}
	})
}

anotherFunction()
	.then(response => console.log(response))
	.catch(err => console.log(err))
	.finally(() => console.log('Finnaly'));

/*output con if(true):
Hey!!
Finnaly
*/

/*output con if(false):
Whoooops!
Finnaly
*/

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

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

//Ejercicio #1

async function* anotherGenerator() {
yield await Promise.resolve(1);
yield await Promise.resolve(2);
yield await Promise.resolve(3);

}

//Si se quita los async-await, al compila da un error por seguir usando .then
const other = anotherGenerator();
other.next().then(response => console.log(response.value));
other.next().then(response => console.log(response.value));
other.next().then(response => console.log(response.value));
console.log('Hello!');

/*output:
Hello!
1
2
3
*/

//Ejercicio #2
async function arrayOfNames(array) {
for await (let value of array) {
console.log(value);
}
}

const names = arrayOfNames(['Oscar', 'David', 'Ana']);
console.log('After');

/*output:
After
Oscar
David
Ana
*/

Algo interesante que deberías probar:

finally es una cláusula que se puede usar en una función asíncrona o en una cadena de promesas para especificar un bloque de código que se ejecutará siempre, independientemente de si la promesa se resuelve o se rechaza.

En términos de sintaxis, finally se agrega al final de una cadena de promesas después de then y/o catch. Este bloque de código se ejecutará después de que la promesa se resuelva o se rechace, pero antes de que se resuelva la promesa devuelta por then o catch.

La forma correcta para hacer funcionar nuestro codigo es esta sin tener que usar el await y async

other.next().value.then(...)

Por fin 00, 01, 02 y 03 juntas !!!

Para mejorar un poco el codigo explicado y tomando referencias de MDN podemos formatear el codigo de la siguiente forma, e agregado comentarios para que de forma mas clara podamos notar los outputs de cada impresión por consola

// Agregue un asterisco después de la function palabra clave para marcar una función como generadora.
function* anotherGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const other = anotherGenerator();
// El metodo next()regresa un objeto con las propiedades doney value. También puedes pasar un parámetro al método next para enviar un valor al generador.
console.log(other.next().value);
console.log(other.next().value);
console.log(other.next()); // Esto nos devuelve un Objecto con dos propiedades:

// Es verdadero si el iterador ya llego al final de la secuencia. En este caso valor, defina opcionalmente el valor de retorno del iterador.

// Es falso si el iterador puede dar un siguiente valor en la secuencia. Es equivalente a no definir la propiedad done.

//value => cualquier valor Javascript regresado por el iterador. Este puede ser omitido si done es verdadero.

console.log(other.next());
console.log('Hello!');
/*
1
2
{ value: 3, done: false }
{ value: undefined, done: true }
Hello!
*/

ya me estoy confundiendo en esta parte creo que va fallando la explicacion

En cada clase utiliza expresiones o terminos de js que no se han explicado en cursos anteriores, o por lo menos si seguimos unas de sus rutas definidas. Dejo un aporte para quien se haya fijado y no entendiese que ocurria.

yield await Promise.resolve(1); /* No utiliza new Promise .... */

/* Porque resolve() es un método estatico de la clase Promise y se declaran así: */

class Clase{
	static metodoEstatico() {
    		//...
  	}
}

La verdad me confundió un poco. Sin embargo, es importante apoyarse de fuentes externas.

Ejemplo de cómo se podrían utilizar los generadores asíncronos en un escenario relacionado con un gimnasio, donde se obtienen los registros de asistencia de los miembros de manera asíncrona:

// Simulación de registros de asistencia en un gimnasio
const attendanceRecords = [
  { memberId: 1, date: '2023-05-10' },
  { memberId: 2, date: '2023-05-11' },
  { memberId: 3, date: '2023-05-12' },
  { memberId: 4, date: '2023-05-13' },
  { memberId: 5, date: '2023-05-14' }
];

async function* getAttendanceRecords() {
  for (const record of attendanceRecords) {
    // Simular una operación asíncrona, como obtener los datos del miembro desde una base de datos
    const memberData = await fetchMemberData(record.memberId);

    // Agregar los datos del miembro al registro de asistencia
    const attendanceRecordWithMemberData = {
      ...record,
      memberData
    };

    yield attendanceRecordWithMemberData;
  }
}

async function fetchMemberData(memberId) {
  // Simular una solicitud asíncrona para obtener los datos del miembro
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ memberId, name: 'John Doe', age: 30, subscription: 'Gold' });
    }, 1000);
  });
}

async function displayAttendanceRecords() {
  const attendanceGenerator = getAttendanceRecords();

  for await (const record of attendanceGenerator) {
    console.log(record);
  }

  console.log('Proceso de obtención de registros de asistencia finalizado');
}

displayAttendanceRecords();

//**Output**
 {
  memberId: 1,
  date: '2023-05-10',
  memberData: { memberId: 1, name: 'John Doe', age: 30, subscription: 'Gold' }
}
{
  memberId: 2,
  date: '2023-05-11',
  memberData: { memberId: 2, name: 'John Doe', age: 30, subscription: 'Gold' }
}
{
  memberId: 3,
  date: '2023-05-12',
  memberData: { memberId: 3, name: 'John Doe', age: 30, subscription: 'Gold' }
}
{
  memberId: 4,
  date: '2023-05-13',
  memberData: { memberId: 4, name: 'John Doe', age: 30, subscription: 'Gold' }
}
{
  memberId: 5,
  date: '2023-05-14',
  memberData: { memberId: 5, name: 'John Doe', age: 30, subscription: 'Gold' }
}
Proceso de obtención de registros de asistencia finalizado

En este ejemplo, tenemos un array ficticio llamado attendanceRecords que contiene registros de asistencia de los miembros del gimnasio. La función generadora asíncrona getAttendanceRecords() se utiliza para obtener los registros de asistencia de manera asíncrona.

Dentro del bucle for…of de la función generadora, se recorren los registros de asistencia y se realiza una operación asíncrona ficticia para obtener los datos del miembro utilizando la función fetchMemberData(). Esta función simula una solicitud asíncrona para obtener los datos del miembro a partir de un memberId. En este caso, se utiliza setTimeout para simular una demora de 1 segundo antes de que se resuelva la promesa y se devuelvan los datos del miembro.

Luego, se agrega los datos del miembro obtenidos al registro de asistencia utilizando la sintaxis de objetos extendidos (…record) para crear una nueva objeto attendanceRecordWithMemberData que contiene tanto los datos del registro de asistencia como los datos del miembro.

El resultado de cada iteración del generador es un objeto que combina el registro de asistencia con los datos del miembro, y se muestra en la consola.

Finalmente, el proceso de obtención de registros de asistencia finaliza cuando se completa el recorrido del generador, y se muestra un mensaje de finalización.

Mi resumen:

Lo de asincrono se pone un poco más difícil a mi punto de vista, pero con práctica lo lograré…sigan así compañeros que ya están en la clase 23.

23/35 ES9: Promise.finally

En Es9 se agregaron el método finallu para promesas y los generadores asíncronos. El método finally permite ejecutar código después de que una promesa haya sido resuelta o rechazada, mientras que los generadores asíncronos combinan la sintaxis de generadores con promesas para permitir un mejor manejo de código asíncrono. También se puede utilizar el ciclo for await para iterar sobre elementos de un iterable de manera asíncrona.

Ejemplo:

// Ejemplo de método finally en promesas
promesa()
  .then(response => console.log(response)) // Promesa resuelta
  .catch(error => console.log(response)) // Promesa rechazada
  .finally(() => console.log("Finalizado")) // Código final  

// Ejemplo de generadores asíncronos
async function* anotherGenerator() {
  yield await Promise.resolve(1)
  yield await Promise.resolve(2)
  yield await Promise.resolve(3)
}

const generador = anotherGenerator()
generador.next().then(respuesta => console.log(respuesta.value))
generador.next().then(respuesta => console.log(respuesta.value))
generador.next().then(respuesta => console.log(respuesta.value))

// Ejemplo de for await
async function forAwait() {
  const nombres = ["Alexa", "Oscar", "David"]
  for await (let valor of nombres) {
    console.log(valor)
  }
}

forAwait()

Ejemplo corregido del generador, con las promesas, pero sin el async-await:

function* anotherGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

const other = anotherGenerator();
console.log(other.next().value)
console.log(other.next().value)
console.log(other.next().value)
console.log(“hello”);

Modifique el primer ejemplo que ponen en la sección de recursos.

promesa()
    .then(response => console.log(response)) // Promesa resuelta
    .catch(error => console.log(error)) // Promesa rechazada
    .finally(() => console.log("Independientemente del estado final de la promesa, esto se tiene que hacer....")); // Código final 

Cosas de la vida XD

async function* objectAsyncPromise(arr) {
  for await (let res of arr) {
    console.log(res, "promise");
  }
}
async function objectAsync(arr) {
  for await (let res of arr) {
    console.log(res, "async");
  }
}
const arrName = ["Chirly", "Daniela", "Marcela", "Tatiana"];
const namesAsyncPromise = objectAsyncPromise(arrName);
namesAsyncPromise.next().then((res) => res);
objectAsync(arrName);

Un pequeño ejemplo XD

function* generatePromise() {
  yield Promise.resolve(1);
  yield Promise.resolve(2);
  yield Promise.resolve(3);
}
const generatePromise = generatePromise();
async function* generateASync() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}
const asyncGenerate = generateASync();

generatePromise.next().value.then((res) => console.log(res, "promise"));
asyncGenerate.next().then((res) => console.log(res.value, "async"));