...

En JavaScript podemos encontrarnos con código asíncrono, con el tipo de dato Promesa que, por ejemplo, obtenemos como respuesta de las llamadas a servicios REST con axios. Para tratar este código, tenemos dos formas principales: con los métodos .then(), .catch() y .finally() que proporcionan las promesas, o con async y await.

Tipo de dato Promise

En JavaScript, el tipo Promise es un objeto que se usa para funcionalidades asíncronas, y representa un valor que se resolverá en el futuro, ya sea con éxito o con error.

Image ModifiedCrear objetos Promise

Aunque por lo general no necesitaremos crear nuestros propios Promise, es importante conocer cómo se haría. La sintaxis del constructor del objeto promise sería la siguiente:

...

• resolve(value) - si la tarea ha finalizado con éxito, devolviendo value.
• reject(error) - si se ha producido un error, devolviendo el objeto error.

Cómo consumir objetos Promise

Utilizando .then(), .catch() y .finally()

Estos tres métodos tienen un funcionamiento que se asemeja al try - catch - finally que podemos conocer de Java. Se ejecuta el código que se indique en .then( ... ) si la promesa se resuelve correctamente, se ejecuta .catch( ... ) si da un error, y tras ejecutarse uno u otro, se ejecuta siempre .finally( ... ).

.then( ... )

El método principal para el tratamiento de las Promise será .then, pues nos permite tratar una promesa exitosa, pero también nos permite definir el tratamiento de errores, pudiendo ahorrarnos el .catch. El código a ejecutar en cada caso se definiría con dos funciones, de esta forma:

...

El primer argumento define la función que se ejecutará en el momento en el que se resuelva la promesa, y el segundo argumento la función que se ejecutará si se devuelve un error. Si solo estamos interesados en reaccionar a una respuesta exitosa, podemos indicar únicamente el primer argumento.

.catch( ... )

Con .catch podemos definir el tratamiento de problemas que se resuelven en error. Como hemos visto, este tratamiento se puede incluir como segundo argumento de .then, pero si queremos utilizarlo para que el código sea más legible, o porque solo queremos ejecutar código en caso de error, se haría así:

promise.catch((error) => { /* Código en respuesta a un error */ });

finally( ... )

Por último, la función que indiquemos en el .finally se ejecutará después de que la promesa haya dado un valor, ya sea correcto o error, y su sintaxis sería como en los casos anteriores:

...

Una particularidad del finally es que realmente no tiene por qué ser el último código que se ejecute. Then catch y finally se ejecutan una vez se ha resuelto la promesa, pero si ponemos el finally antes de los otros métodos, su código se ejecutará antes, independientemente de cómo se haya resuelto la promesa.

Utilizando async/await

Posteriormente a las promesas, se incluyeron async y await, con el que podemos hacer el tratamiento del código asíncrono con un código más limpio, pues si encadenamos varias promesas, los bloques vistos en el apartado anterior anidados pueden ser poco legibles.

Async

Async es un modificador que podemos añadir a las funciones para especificar que estas sean asíncronas:

...

De esta forma, lo que se hace es que esa función devuelva un Promise, aunque no la creemos explícitamente. Si una función no incluye el async, pero devuelve un Promise, se considera async igualmente.

Await

Cuando hacemos una llamada a una función asíncrona, es decir, que devuelva una Pormise, podemos incluir el await delante de la llamada:

...