Manejo de Finally y Async en ECMAScript 9

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

Resumen

Las siguientes características de ES9 o ES2018 que aprenderás son: método finally para promesas y generadores asíncronos.

Método finally en promesas

El método finally para promesas consiste en ejecutar código después que una promesa haya sido ejecutada como resuelta o rechazada.

promesa()
    .then(response => console.log(response) // Promesa resuelta
    .catch(error => console.log(response) // Promesa rechazada
    .finally( () => console.log("Finalizado") ) // Código final

Generadores asíncronos

Los generados asíncronos son semejantes a los generadores que ya conoces, pero combinando sintáxis de promesas.

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

Cómo utilizar for await

De la misma manera, for await es un ciclo repetitivo que se maneja asíncronamente. El ciclo siempre debe estar dentro de una función con async.

El valor es cada elemento del iterable puede tener cualquier nombre, por eso se inicia con let nombre.

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

forAwait()

Cursos para entender el asincronismo en JavaScript

Si aún no sabes en qué consiste el asincronismo, no te preocupes, existen cursos completos de este tema.

Contribución creada por Andrés Guano (Platzi Contributor).

Magdiel Linares

student•

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

Darwin Salinas

student•

Si, creo que se le pasó ese detalle, gracias por el aporte

Felix Torres Javier Antonio

student•

Muchas gracias por el aporte!!!!

Irving Caamal

student•

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

Teo Zavala

student•

Una manera de verlo mas claro, gracias por el aporte.

LESTHER XITUMUL MANUEL

student•

¡Directo a mis apuntes! Muchas Gracias :D

Yuli Alexandra Pulido Castañeda

student•

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

Jose Osorio

student•

Clase que veo, copio tus apuntes, muy agradecido!

Zajith Corro Viveros

student•

.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

Edward Hernandez

student•

No explica nada bien

Felix Torres Javier Antonio

student•

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

Javier Marin Ayza

student•

Eso del next pasa con los generadores normales, y Oscar ya lo comento en esa clase.... ten en cuenta que la función solo tiene 3 yield por lo que se guardan 3 estados, y tu llamas 4 next el 4 no existe... para que te devuelva un valor debes añadir otro yield en la función.

Hector Rodriguez

student•

Ten en cuenta que la función solo tiene 3 yield por lo que se guardan 3 estados, y tu llamas al 4 next (el 4 next no existe)

Tambien debemos tener en cuenta que suceden otras cosas, al no existir el 4 next value pasa a ser undefined y done (que es un booleano con valor de false) pasa a ser true, esto marcando que ya finalizo el generador!!

Magdiel Linares

student•

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

Yerson David Aguilar Martinez

student•

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
*/

Jose Pinto

student•

gracias

Diego Camino Reinoso

student•

como es posible que este curso este publico con tantos errores? Platzi, lees los comentarios de tus estudiantes de casualidad?

Diego Camino Reinoso

student•

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.

Julia Gabriela Nieva Paredes

student•

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?

Pablo Nistal

student•

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?

Luis Hernando Sendoya Serrato

student•

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

Magdiel Linares

student•

La verdad no entiendo y no veo la diferencia quitando el await (pero dejando el async)... purebo esto con y sin await y se comporta igual... mi logica diria que si no hay await, se debe ejecutar el then() del proximo next() peor esto no pasa

async function* anotherGenerator() {
    yield await Promise.resolve(1);
    yield await new Promise((resolve, reject) => {
        if (true) {
            setTimeout(() => resolve(2), 5000)
        } else {
            setTimeout(() => reject("Whooops!"), 5000)
        }
    })
    yield await Promise.resolve(3);
}

const other = anotherGenerator();
other.next().then(response => console.log('next...' + response.value));
console.log('After 1st next!');
other.next().then(response => console.log('next...' + response.value));
console.log('After 2nd next!');
other.next().then(response => console.log('next...' + response.value));
console.log('After 3rd next!');

Juan Carlos Montilla Sánchez

student•

Hola, Magdiel.

Es muy curiosa tu pregunta y me genera también seguir probando.

Tenía entendido que una función async sin el await puede generar un problema, ya que el await espera a que se cumpla la asincronía sin bloquear el código pero teniendo en cuenta una promesa y su respectivo then, siento que el then hace que se imprima el valor si se cumple la condición o si pasa por el resolve, ya que siento yo que como argumento el then recibe el resolve. Te hago un ejemplo:

promiseWithFinally()
// el argumento response para mí es lo que está adentro de resolve('Soy el argumento que entra como response')
  .then(response => console.log(response))

Espero haberte ayudado.

Si tienes alguna mejor explicación; estoy dispuesto a leerlo.

Saludos.

Diego Camino Reinoso

student•

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

Jesus Eduardo Castillo Saavedra

student•

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.

Alejandro Mujica

student•

Al eliminar el await del generador siguió ejecutando bien :s

Julian Franco

student•

Alguien me puede resolver una duda. Por qué si ejecuto todo el código me aparece este resultado.

Williams Antonio Hernandez Ardila

student•

Debes mostrar el codigo para poder darte un comentario

Julia Gabriela Nieva Paredes

student•

Se supone qué sólo corras desde:

 async function arrayOfNames(array){

No todo el programa.

Diego Fernando Ortiz Gamboa

student•

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

Luis Alfredo Suarez

student•

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. 👨‍💻

Valeria Molina

student•

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

Miguel Angel Reyes Moreno

student•

Lo que pasa es que .then() y .catch() son métodos encadenados. Es decir, viene uno detrás del otro. Si pones un ; antes le estás diciendo a JS que ahí se termina la instrucción. Por eso aquí es sí es importante.