<\/p>\n\n\n\n
La asincron\u00eda en JavaScript es como tener un chef trabajando en la cocina mientras t\u00fa sigues disfrutando de una conversaci\u00f3n con tus amigos en el comedor. Mientras el chef prepara tus platillos, t\u00fa no tienes que esperar inactivamente hasta que la comida est\u00e9 lista. En su lugar, puedes continuar disfrutando de tu tiempo, y cuando los platillos est\u00e9n listos, ser\u00e1s notificado para saborearlos.<\/p>\n\n\n\n
En la programaci\u00f3n, la asincron\u00eda es similar. Permite que el programa realice m\u00faltiples tareas simult\u00e1neamente sin bloquear su ejecuci\u00f3n. Mientras una tarea est\u00e1 en progreso, el programa puede seguir funcionando y manejar otras tareas en segundo plano.<\/p>\n\n\n\n
En contraste, la programaci\u00f3n sincr\u00f3nica es como tener al chef cocinando y t\u00fa esperando frente a la cocina hasta que la comida est\u00e9 lista. No puedes hacer nada m\u00e1s hasta que se complete la tarea actual.<\/p>\n\n\n\n
En JavaScript, la asincron\u00eda se vuelve relevante cuando trabajamos con operaciones que pueden llevar tiempo, como hacer solicitudes a servidores remotos o esperar la respuesta de una base de datos. En lugar de detener por completo la ejecuci\u00f3n del programa mientras esperamos, podemos aprovechar la asincron\u00eda para seguir realizando otras tareas.<\/p>\n\n\n\n
A lo largo del art\u00edculo vamos a explorar c\u00f3mo JavaScript maneja la asincron\u00eda, comenzando con los callbacks, una t\u00e9cnica com\u00fanmente utilizada antes de la introducci\u00f3n de las promesas.<\/p>\n\n\n\n
Callbacks<\/h2>\n\n\n\n <\/p>\n\n\n\n
En t\u00e9rminos de programaci\u00f3n, los callbacks funcionan de manera similar. Un callback es una funci\u00f3n que se pasa como argumento a otra funci\u00f3n y se invoca m\u00e1s tarde, generalmente cuando ocurre un evento o se completa una operaci\u00f3n asincr\u00f3nica. Es una forma de decirle a una funci\u00f3n: \u00abCuando termines, en lugar de esperar inmediatamente, ll\u00e1mame de vuelta y perm\u00edteme continuar con mi trabajo\u00bb.<\/p>\n\n\n\n
Explicaci\u00f3n de pseudo c\u00f3digo:<\/h3>\n\n\n\n Imagina que eres el director de una orquesta y est\u00e1s coordinando una presentaci\u00f3n musical. Tienes diferentes m\u00fasicos que tocan diferentes instrumentos y cada uno necesita seguir un conjunto de instrucciones espec\u00edficas.<\/p>\n\n\n\n
En lugar de decirles a todos los m\u00fasicos que toquen al mismo tiempo y esperar a que terminen antes de continuar, utilizas un enfoque basado en callbacks. Les das a cada m\u00fasico una se\u00f1al para que comiencen a tocar su parte cuando llegue su turno. Una vez que cada m\u00fasico ha terminado de tocar su parte, te avisan a trav\u00e9s de un gesto para que puedas pasar al siguiente m\u00fasico y continuar con la presentaci\u00f3n de manera fluida.<\/p>\n\n\n\n
En t\u00e9rminos de programaci\u00f3n, cada m\u00fasico representa una funci\u00f3n y las se\u00f1ales que les das para que comiencen a tocar son los callbacks. Cada funci\u00f3n es llamada en el momento adecuado y cuando ha terminado su tarea, invoca al callback para notificar que ha terminado y que es el turno de la siguiente funci\u00f3n.<\/p>\n\n\n\n
Este enfoque basado en callbacks permite una ejecuci\u00f3n ordenada y controlada de las tareas, evitando bloqueos y permitiendo que cada funci\u00f3n se ejecute en el momento adecuado, al igual que cada m\u00fasico toca su parte en el momento correcto durante la presentaci\u00f3n.<\/p>\n\n\n\n
Aqu\u00ed tienes un ejemplo de pseudo c\u00f3digo para ilustrar c\u00f3mo se utiliza un callback:<\/p>\n\n\n\n
function hacerAlgo(callback) {\n \/\/ Hacer alguna operaci\u00f3n aqu\u00ed\n\n \/\/ Una vez que se completa la operaci\u00f3n, invocar el callback\n callback();\n}\n\nfunction miCallback() {\n console.log(\"\u00a1El callback ha sido invocado!\");\n}\n\n\/\/ Pasar miCallback como argumento al hacerAlgo\nhacerAlgo(miCallback);\n<\/code><\/pre>\n\n\n\nEn este ejemplo, tenemos una funci\u00f3n llamada hacerAlgo<\/code> que realiza una operaci\u00f3n y luego invoca al callback pasado como argumento. En este caso, el callback es la funci\u00f3n miCallback<\/code>. Una vez que hacerAlgo<\/code> completa su operaci\u00f3n, invoca a miCallback<\/code> y se imprime \u00ab\u00a1El callback ha sido invocado!\u00bb en la consola.<\/p>\n\n\n\nExplicaci\u00f3n de c\u00f3digo fuente de JavaScript:<\/h3>\n\n\n\n Aqu\u00ed tienes un ejemplo de c\u00f3digo fuente de JavaScript que demuestra el uso de callbacks:<\/p>\n\n\n\n
function doSomething(callback) {\n \/\/ Simulamos una operaci\u00f3n asincr\u00f3nica con setTimeout\n setTimeout(function() {\n \/\/ Una vez que se completa la operaci\u00f3n, invocar el callback\n callback();\n }, 2000);\n}\n\nfunction myCallback() {\n console.log(\"\u00a1El callback ha sido invocado!\");\n}\n\n\/\/ Pasar myCallback como argumento a doSomething\ndoSomething(myCallback);<\/code><\/pre>\n\n\n\nEn este caso, la funci\u00f3n doSomething<\/code> simula una operaci\u00f3n asincr\u00f3nica utilizando setTimeout<\/code>. Despu\u00e9s de 2 segundos, invoca al callback pasado como argumento, que en este caso es la funci\u00f3n myCallback<\/code>. Al ejecutar este c\u00f3digo, se imprimir\u00e1 \u00ab\u00a1El callback ha sido invocado!\u00bb en la consola despu\u00e9s de que transcurran los 2 segundos.<\/p>\n\n\n\nLos callbacks son una forma com\u00fan de manejar la asincron\u00eda en JavaScript. Sin embargo, pueden llevar a situaciones de anidamiento excesivo de funciones y dificultades para mantener el flujo del programa. Es aqu\u00ed donde las promesas, que exploraremos a continuaci\u00f3n, ofrecen una soluci\u00f3n m\u00e1s estructurada y legible.<\/p>\n\n\n\n
Promesas<\/h2>\n\n\n\n Imagina que est\u00e1s esperando un paquete muy esperado que ser\u00e1 entregado a tu puerta. Tienes una promesa de entrega que te asegura que recibir\u00e1s el paquete. Mientras esperas, puedes seguir realizando tus tareas diarias, como cocinar, limpiar o trabajar en tu proyecto. La promesa de entrega se cumplir\u00e1 cuando el paquete llegue y podr\u00e1s abrirlo para ver su contenido. Si el correo asignado para hacerte la entrega del paquete tiene alg\u00fan problema para realizar la entrega, enviar\u00e1 una notificaci\u00f3n para darte aviso que el paquete no ser\u00e1 entregado.<\/p>\n\n\n\n
En t\u00e9rminos de programaci\u00f3n, una promesa en JavaScript es similar. Es una garant\u00eda de que una acci\u00f3n o una operaci\u00f3n asincr\u00f3nica se cumplir\u00e1 en el futuro, de forma exitosa o no pero se cumplir\u00e1. Mientras esperas que se cumpla la promesa, tu c\u00f3digo puede continuar ejecut\u00e1ndose y realizar otras tareas. Una vez que la promesa se cumple (nuevamente para bien o para mal) obtienes los resultados deseados.<\/p>\n\n\n\n
console.log(\"hago algo\")\n\n\/\/ Asignar la promesa a una variable\nconst promise = new Promise(function(resolve, reject) {\n \/\/ Genero un retraso de 500 milisegundos para dar una respuesta\n \/\/ Con esto simulo una conexi\u00f3n a una base de datos por ejemplo\n setTimeout(function() {\n\n \/\/genero un numero al azar de 1 a 10 y pregunto si es par o no\n \/\/de esta forma simulo que a veces el paquete es entregado y a veces no\n if((Math.floor(Math.random() * 10) + 1) % 2 === 0){\n \/\/el numero es par, el paquete se entrega exitosamente con resolve\n resolve(\"\u00a1El paquete ha sido entregado!\");\n }else{\n \/\/el numero es impar, el paquete no se ha entregado\n reject(\"Lo siento, no se pudo entregar el paquete.\");\n }\n }, 500);\n});\n\nconsole.log(\"sigo haciendo otra cosa\")\n\n\/\/ Utilizar la promesa\npromise\n .then(function(result){\n console.log(result);\n })\n .catch(function(error) {\n console.log(error);\n });\n \nconsole.log(\"hago una \u00faltima cosa.\");\n<\/code><\/pre>\n\n\n\nAqu\u00ed la explicaci\u00f3n paso a paso de lo que fue pasando en el c\u00f3digo anterior<\/p>\n\n\n\n
\nLa l\u00ednea console.log(\"hago algo\")<\/code> simplemente muestra en la consola el mensaje \u00abhago algo\u00bb como una indicaci\u00f3n de que se est\u00e1 realizando una tarea.<\/li>\n\n\n\nSe crea una promesa utilizando new Promise(function(resolve, reject) {...})<\/code>. Esta promesa representa una operaci\u00f3n asincr\u00f3nica simulada, como una conexi\u00f3n a una base de datos. El c\u00f3digo dentro de la promesa utiliza setTimeout<\/code> para simular un retraso de 500 milisegundos antes de dar una respuesta.<\/li>\n\n\n\nDentro de setTimeout<\/code>, se genera un n\u00famero al azar entre 1 y 10 utilizando Math.floor(Math.random() * 10) + 1<\/code>. Luego, se verifica si el n\u00famero es par o impar usando el operador de m\u00f3dulo %<\/code>. Si el n\u00famero es par, la promesa se cumple llamando a la funci\u00f3n resolve<\/code> y se devuelve el mensaje \u00ab\u00a1El paquete ha sido entregado!\u00bb. Si el n\u00famero es impar, la promesa es rechazada llamando a la funci\u00f3n reject<\/code> y se devuelve el mensaje \u00abLo siento, no se pudo entregar el paquete.\u00bb.<\/li>\n\n\n\nLa l\u00ednea console.log(\"sigo haciendo otra cosa\")<\/code> muestra en la consola el mensaje \u00absigo haciendo otra cosa\u00bb. Esto representa que se est\u00e1 realizando otra tarea mientras la promesa est\u00e1 en curso.<\/li>\n\n\n\nSe utiliza el m\u00e9todo .then()<\/code> para manejar el resultado de la promesa en caso de que se cumpla. Dentro de la funci\u00f3n de retorno de .then()<\/code>, se muestra en la consola el resultado recibido.<\/li>\n\n\n\nSe utiliza el m\u00e9todo .catch()<\/code> para manejar el error de la promesa en caso de que sea rechazada. Dentro de la funci\u00f3n de retorno de .catch()<\/code>, se muestra en la consola el mensaje de error recibido.<\/li>\n\n\n\nPor \u00faltimo, la l\u00ednea console.log(\"hago una \u00faltima cosa.\")<\/code> muestra en la consola el mensaje \u00abhago una \u00faltima cosa\u00bb. Esto representa que se est\u00e1 realizando una \u00faltima tarea despu\u00e9s de haber manejado el resultado o el error de la promesa.<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
Estados<\/h3>\n\n\n\n Las promesas en JavaScript tienen tres estados posibles:<\/p>\n\n\n\n
\nPending (pendiente):<\/strong> Este es el estado inicial de una promesa. Significa que la promesa est\u00e1 en curso y a\u00fan no se ha cumplido ni rechazado, est\u00e9 estado lo encuentras apenas creas la promesa<\/li>\n\n\n\nFulfilled (cumplida):<\/strong> Una promesa entra en este estado cuando se cumple exitosamente. Esto significa que se ejecut\u00f3 la operaci\u00f3n asincr\u00f3nica asociada y se obtuvieron los resultados deseados, aqu\u00ed es donde recibes el resultado en .then<\/strong><\/li>\n\n\n\nRejected (rechazada):<\/strong> Una promesa entra en este estado si ocurre alg\u00fan error durante la ejecuci\u00f3n de la operaci\u00f3n asincr\u00f3nica. Esto significa que la promesa fue rechazada y se obtiene informaci\u00f3n sobre el error. Aqu\u00ed es donde recibes el resultado en .catch<\/strong><\/li>\n<\/ol>\n\n\n\n<\/p>\n\n\n\n
Promesas en video<\/h3>\n\n\n\n Programaci\u00f3n en espa\u00f1ol<\/a> es un excelente canal de Youtube, encontrar\u00e1s muchos videos de gran calidad y aqu\u00ed te dejo su explicaci\u00f3n del tema de que nos tiene aqu\u00ed, promesas (solo mira hasta el minuto 27, la clase que viene seguiremos con los temas que est\u00e1n en este video)<\/p>\n\n\n\n
![\"\"](\"https:\/\/danielsegovia.com\/plataforma\/wp-content\/uploads\/2023\/05\/Leonardo_Creative_diners_at_a_restaurant_table_eating_while_a_2.jpg\")
<\/a><\/figure>\n<\/div>\n\n\n