{"id":204,"date":"2023-07-14T17:45:59","date_gmt":"2023-07-14T20:45:59","guid":{"rendered":"https:\/\/danielsegovia.com\/plataforma\/?p=204"},"modified":"2023-07-23T19:30:59","modified_gmt":"2023-07-23T22:30:59","slug":"14-async-await","status":"publish","type":"post","link":"https:\/\/danielsegovia.com\/plataforma\/14-async-await\/","title":{"rendered":"14 – Async Await"},"content":{"rendered":"\n

Cuando se trata de desarrollar aplicaciones de backend en Node.js, la asincron\u00eda se convierte en una herramienta esencial para manejar operaciones intensivas y proporcionar un rendimiento \u00f3ptimo. En el mundo del backend, las tareas a menudo involucran la comunicaci\u00f3n con bases de datos, el acceso a sistemas de archivos, el env\u00edo de solicitudes a APIs externas o la manipulaci\u00f3n de grandes conjuntos de datos.<\/p>\n\n\n\n

Para aprovechar eficientemente estas operaciones, Node.js introduce las funciones asincr\u00f3nicas, que nos permiten desbloquear el potencial de la asincron\u00eda y mejorar el rendimiento y la capacidad de respuesta de nuestras aplicaciones de backend.<\/p>\n\n\n\n

Imaginemos que eres el administrador de un sistema de gesti\u00f3n de inventario para un almac\u00e9n. Tu tarea consiste en procesar las \u00f3rdenes de los clientes, mantener actualizado el inventario y generar informes peri\u00f3dicos. Cada una de estas tareas puede requerir diferentes operaciones, como consultar la base de datos para obtener informaci\u00f3n del inventario, realizar c\u00e1lculos complejos o enviar notificaciones a los clientes cuando se complete una orden.<\/p>\n\n\n\n

Aqu\u00ed es donde las funciones asincr\u00f3nicas juegan un rol fundamental. Al igual que en el mundo de la cocina, donde puedes preparar varias tareas simult\u00e1neamente, las funciones asincr\u00f3nicas en Node.js te permiten realizar operaciones de forma paralela y aprovechar al m\u00e1ximo el tiempo. Mientras una tarea, como la consulta de la base de datos, est\u00e1 en progreso, puedes iniciar otras tareas en segundo plano, como el c\u00e1lculo de informes o el env\u00edo de notificaciones, sin bloquear la ejecuci\u00f3n del programa.<\/p>\n\n\n\n

Con las funciones asincr\u00f3nicas, puedes crear una experiencia de backend eficiente y receptiva. Estas funciones te permiten manejar m\u00faltiples tareas concurrentes y aprovechar al m\u00e1ximo los recursos de tu servidor, garantizando as\u00ed un rendimiento \u00f3ptimo para tu aplicaci\u00f3n de backend.<\/p>\n\n\n\n

A medida que profundizamos en est\u00e1 clase, exploraremos c\u00f3mo las funciones asincr\u00f3nicas en Node.js, combinadas con promesas y async\/await, te permiten gestionar eficientemente tareas intensivas, manejar errores de manera efectiva y construir aplicaciones backend de alto rendimiento.<\/p>\n\n\n\n

Promesas y el modelo de programaci\u00f3n as\u00edncrona: Simplificando la gesti\u00f3n de operaciones asincr\u00f3nicas<\/h2>\n\n\n\n

Cuando nos enfrentamos a tareas asincr\u00f3nicas en JavaScript, como realizar solicitudes a una API, leer archivos o interactuar con una base de datos, es vital poder manejar adecuadamente su flujo y asegurarnos de que las operaciones se completen correctamente.<\/p>\n\n\n\n

Aqu\u00ed es donde entran en juego las promesas. Una promesa es un objeto que representa el resultado pendiente de una operaci\u00f3n asincr\u00f3nica. Proporciona una forma estructurada y m\u00e1s legible de manejar el flujo asincr\u00f3nico y evitar los problemas asociados con los callbacks anidados.<\/p>\n\n\n\n

Imagina que tienes una promesa como una promesa hecha por alguien. Al hacer una promesa, alguien se compromete a hacer algo en el futuro y puede tener dos resultados: cumplir la promesa (resoluci\u00f3n) o no cumplirla (rechazo).<\/p>\n\n\n\n

En JavaScript, una promesa sigue el mismo principio. Puedes crear una promesa y definir qu\u00e9 sucede cuando se cumple o se rechaza. Por ejemplo, al realizar una solicitud HTTP para obtener datos de una API, puedes crear una promesa que se resuelva con los datos obtenidos o se rechace si ocurre un error en la solicitud.<\/p>\n\n\n\n

Al utilizar promesas, podemos encadenar m\u00faltiples operaciones asincr\u00f3nicas de forma m\u00e1s clara y concisa. Esto se logra mediante el uso de los m\u00e9todos then()<\/code> y catch()<\/code>. El m\u00e9todo then()<\/code> se utiliza para manejar la resoluci\u00f3n exitosa de una promesa, mientras que el m\u00e9todo catch()<\/code> se utiliza para capturar cualquier error que ocurra durante la ejecuci\u00f3n de la promesa.<\/p>\n\n\n\n

Adem\u00e1s, las promesas nos permiten realizar operaciones asincr\u00f3nicas en paralelo, utilizando el m\u00e9todo Promise.all()<\/code>, que acepta un array de promesas y devuelve una nueva promesa que se resuelve cuando todas las promesas del array se han resuelto.<\/p>\n\n\n\n

Las promesas simplifican el modelo de programaci\u00f3n asincr\u00f3nica en JavaScript al proporcionar una forma estructurada y m\u00e1s legible de manejar el flujo asincr\u00f3nico. Nos permiten encadenar operaciones asincr\u00f3nicas, manejar resoluciones exitosas y capturar errores de manera m\u00e1s clara y concisa. Con el uso de promesas, podemos escribir c\u00f3digo m\u00e1s mantenible y comprensible al lidiar con operaciones asincr\u00f3nicas en nuestras aplicaciones.<\/p>\n\n\n\n

Funciones as\u00edncronas<\/h2>\n\n\n\n

Si bien las promesas nos permiten manejar operaciones asincr\u00f3nicas de manera m\u00e1s estructurada, JavaScript introdujo la sintaxis async\/await<\/code> para simplificar a\u00fan m\u00e1s la escritura de c\u00f3digo y hacer que el flujo asincr\u00f3nico sea m\u00e1s similar al flujo sincr\u00f3nico.<\/p>\n\n\n\n

La palabra clave async<\/code> se utiliza para declarar una funci\u00f3n asincr\u00f3nica. Al marcar una funci\u00f3n con async<\/code>, indicamos que contendr\u00e1 operaciones asincr\u00f3nicas y que, dentro de ella, podemos utilizar la palabra clave await<\/code>.<\/p>\n\n\n\n

La palabra clave await<\/code> se utiliza dentro de una funci\u00f3n asincr\u00f3nica para esperar la resoluci\u00f3n de la acci\u00f3n que estamos realizando, es decir, detenemos el flujo de la aplicaci\u00f3n en ese momento. Al utilizar await<\/code>, detenemos la ejecuci\u00f3n de la funci\u00f3n hasta que la promesa se resuelva.<\/p>\n\n\n\n

Esta combinaci\u00f3n de async\/await<\/code> nos permite escribir c\u00f3digo asincr\u00f3nico de una manera que se asemeja a las operaciones secuenciales sincr\u00f3nicas. Por ejemplo, en lugar de encadenar m\u00faltiples promesas utilizando then()<\/code>, podemos utilizar await<\/code> para esperar la resoluci\u00f3n de cada promesa en un orden secuencial, lo que hace que el c\u00f3digo sea m\u00e1s legible y f\u00e1cil de seguir.<\/p>\n\n\n\n

Aqu\u00ed hay un ejemplo que ilustra la sintaxis async\/await<\/code>:<\/p>\n\n\n\n

async function obtenerDatosDeAPI() {\n    const respuesta = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/');\n    const datos = await respuesta.json();\n    console.log(datos)\n}\n\nobtenerDatosDeAPI()<\/code><\/pre>\n\n\n\n
Tranquilamente podr\u00edas hacer lo mismo con promesas, mira como quedar\u00eda cada uno de los c\u00f3digos y ve tu mismo que sintaxis resulta m\u00e1s clara para esto<\/p>\n\n\n\n
\n
\n
Promesas<\/h4>\n\n\n\n
const obtenerDatos = new Promise((resolve, reject) => {\n  fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/')\n    .then((respuesta) => respuesta.json())\n    .then((datos) => resolve(datos))\n    .catch((error) => {\n      console.error('Error al obtener los datos:', error);\n      reject(error);\n    });\n});\n\nobtenerDatos\n  .then((datos) => {\n    console.log(datos);\n  })\n  .catch((error) => {\n    console.log(\"algo sali\u00f3 mal\" + error)\n  });\n<\/code><\/pre>\n<\/div>\n\n\n\n
\n
Funciones as\u00edncronas<\/h4>\n\n\n\n
async function obtenerDatosDeAPI() {\n    const respuesta = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/');\n    const datos = await respuesta.json();\n    console.log(datos)\n}\n\nobtenerDatosDeAPI()<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
La funci\u00f3n fetch no est\u00e1 por default en Node.JS, hay que instalarlo pero ya lo veremos m\u00e1s adelante con el gestor de paquete npm
Para correr el c\u00f3digo puedes utilizar un interprete de JavaScript, por ejemplo: https:\/\/playcode.io\/javascript-compiler<\/p>\n<\/blockquote>\n\n\n\n
Las promesas y las funciones asincr\u00f3nicas son dos enfoques diferentes para manejar operaciones asincr\u00f3nicas en JavaScript.<\/p>\n\n\n\n
Promesas<\/strong>: Las promesas son objetos que representan la eventual finalizaci\u00f3n (o falla) de una operaci\u00f3n asincr\u00f3nica. Proporcionan un mecanismo para manejar el resultado de una operaci\u00f3n asincr\u00f3nica de manera m\u00e1s estructurada y legible. Las promesas se crean utilizando el constructor Promise<\/code> y se encadenan mediante los m\u00e9todos then<\/code> y catch<\/code> para manejar el resultado de la promesa. Con las promesas, se utiliza un enfoque basado en callbacks para manejar la resoluci\u00f3n o el rechazo de la promesa.<\/p>\n\n\n\n
Funciones asincr\u00f3nicas<\/strong>: Las funciones asincr\u00f3nicas, introducidas con la palabra clave async<\/code>, son una forma de escribir c\u00f3digo asincr\u00f3nico de manera m\u00e1s sincr\u00f3nica y legible. Las funciones asincr\u00f3nicas permiten utilizar la palabra clave await<\/code> dentro de ellas para esperar la resoluci\u00f3n de una promesa. Esto evita el encadenamiento de callbacks y proporciona una estructura m\u00e1s similar a la programaci\u00f3n s\u00edncrona. Las funciones asincr\u00f3nicas tambi\u00e9n pueden manejar errores utilizando bloques try-catch<\/code>, lo que simplifica el manejo de errores en comparaci\u00f3n con las promesas.<\/p>\n\n\n\n
Return en funciones as\u00edncronas<\/h3>\n\n\n\n
\n
\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n\n
\n
Cuando definimos una funci\u00f3n sin la palabra clave async<\/code>, se comporta de forma s\u00edncrona y el valor de retorno se devuelve directamente al llamar a la funci\u00f3n. Es decir, la funci\u00f3n se ejecuta secuencialmente y retorna el resultado una vez que todas las operaciones dentro de ella se han completado.<\/p>\n\n\n\n
Por otro lado, cuando utilizamos la palabra clave async<\/code> en la definici\u00f3n de una funci\u00f3n, la funci\u00f3n se vuelve as\u00edncrona y devuelve una promesa<\/strong>. <\/p>\n\n\n\n
Como hemos visto, cuando llamamos a una funci\u00f3n definida con async<\/code>, esta funci\u00f3n se ejecuta de manera as\u00edncrona, lo que significa que puede contener operaciones que tomen tiempo X. 
En lugar de esperar a que se complete toda la funci\u00f3n y devolver el resultado directamente, una funci\u00f3n async<\/code> devuelve una promesa inmediatamente, que se resolver\u00e1 con el valor de retorno una vez que todas las operaciones as\u00edncronas dentro de la funci\u00f3n se hayan completado.<\/p>\n\n\n\n
Por lo tanto si quisiere obtener el valor del \u00abreturn\u00bb debo manejarlo como una promesa en el lugar donde se ha llamado.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Try \/ Catch en funciones as\u00edncronas<\/h3>\n\n\n\n
Ahora como desarrolladores es un rol sumamente importante manejar los posibles errores que se puedan producir, para ello podemos hablar sobre c\u00f3mo combinar el uso de try-catch<\/code> con funciones as\u00edncronas para manejar errores de manera m\u00e1s efectiva.<\/p>\n\n\n\n
Las funciones as\u00edncronas nos permiten utilizar bloques try-catch<\/code> para capturar y manejar errores que se produzcan durante la ejecuci\u00f3n de una operaci\u00f3n as\u00edncrona. Esto es especialmente \u00fatil cuando trabajamos con promesas, ya que nos permite capturar y manejar errores tanto en el proceso de resoluci\u00f3n de la promesa como en su rechazo.<\/p>\n\n\n\n
Aqu\u00ed tienes un ejemplo que muestra c\u00f3mo combinar try-catch<\/code> con una funci\u00f3n as\u00edncrona que utiliza promesas:<\/p>\n\n\n\n
async function obtenerDatos() {\n  try {\n    const respuesta = await fetch('https:\/\/api.example.com\/data');\n    const datos = await respuesta.json();\n    return datos;\n  } catch (error) {\n    throw error;\n  }\n}\n\nasync function mostrarDatos() {\n  try {\n    const datos = await obtenerDatos();\n    datos.forEach((dato) => {\n      console.log(dato);\n    });\n  } catch (error) {\n    console.error('Error al obtener los datos:', error);\n  }\n}\n\nmostrarDatos();\n<\/code><\/pre>\n\n\n\n
En primer lugar, se define una funci\u00f3n asincr\u00f3nica llamada obtenerDatos<\/code>. Dentro de esta funci\u00f3n, se utiliza la palabra clave await<\/code> para esperar la respuesta de una solicitud a la URL ‘https:\/\/api.example.com\/data<\/a>‘ mediante el uso de la funci\u00f3n fetch<\/code>. Luego, se utiliza await<\/code> nuevamente para esperar que la respuesta se convierta en formato JSON utilizando el m\u00e9todo json()<\/code>. Si todo funciona correctamente, se devuelve el objeto de datos.<\/p>\n\n\n\n
Si ocurre alg\u00fan error durante estas operaciones, el flujo de ejecuci\u00f3n se desv\u00eda al bloque catch<\/code>. En este caso, se lanza la excepci\u00f3n error<\/code> utilizando la palabra clave throw<\/code>. Esto significa que la excepci\u00f3n ser\u00e1 propagada y capturada por el bloque catch<\/code> de la funci\u00f3n que llama a obtenerDatos<\/code>.<\/p>\n\n\n\n
A continuaci\u00f3n, se define otra funci\u00f3n asincr\u00f3nica llamada mostrarDatos<\/code>. Dentro de esta funci\u00f3n, se utiliza await<\/code> para llamar a la funci\u00f3n obtenerDatos()<\/code> y esperar los datos resultantes. Luego, se itera sobre los datos utilizando el m\u00e9todo forEach<\/code> y se muestra cada elemento en la consola.<\/p>\n\n\n\n
Si ocurre alg\u00fan error durante la obtenci\u00f3n de los datos o el bucle forEach<\/code>, el flujo de ejecuci\u00f3n se desv\u00eda al bloque catch<\/code>. Aqu\u00ed, se muestra un mensaje de error en la consola con la descripci\u00f3n del error.<\/p>\n\n\n\n
Finalmente, se llama a la funci\u00f3n mostrarDatos()<\/code> para iniciar la ejecuci\u00f3n del c\u00f3digo.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Reviv\u00ed la clase en vivo<\/h2>\n\n\n\n
\n