Aprenda a crear programas asincrónicos con JavaScript

La programación asíncrona es un elemento básico en el desarrollo de software. Es difícil creer que este concepto de programación solo existe desde el siglo XXI. El lenguaje de programación F# fue el primero entre sus pares en introducir la programación asincrónica, en 2007.

Otros lenguajes como C#, Python, JavaScript y C++ agregaron gradualmente compatibilidad con la programación asíncrona. La gran pregunta es, ¿qué valor agrega la programación asíncrona a sus aplicaciones?

Este artículo responde a esa y otras preguntas, por lo que descubrirá todo sobre cómo usar la programación asíncrona.

¿Qué es la programación síncrona?

La programación síncrona se refiere a un programa en su forma más básica. Este modelo de programación procesa las líneas de código en un programa o secuencia de comandos de forma secuencial. Siempre comienza desde la primera línea de código en un programa. Luego espera hasta que cada línea de código haya completado su ejecución antes de pasar a la siguiente.

El modelo síncrono también incluye código condicional, como

si y tiempo declaraciones. Aunque solo se ejecutará parte del código en una declaración condicional, el programa aún se ejecutará secuencialmente.

Ejemplo de programa síncrono

const SyncCode = () => {
 console.log("Esta es la primera línea del programa")
 console.log("Esta es la segunda línea del programa")
 console.log("Esta es la línea final del programa")
}
Código de sincronización();

Ejecutar el programa JavaScript anterior producirá el siguiente resultado en la consola:

Esta es la primera línea del programa.
Esta es la segunda línea del programa.
Esta es la línea final en el programa.

El resultado anterior es exactamente lo que debe esperar. El programa comienza desde arriba y espera hasta que finaliza una línea de código antes de pasar a la siguiente.

¿Qué es la programación asíncrona?

La programación asíncrona es lo opuesto a la programación síncrona. El modelo de programación asincrónica procesa varias líneas de códigos simultáneamente. No espera hasta que la línea de código anterior en un programa haya completado su ejecución antes de pasar a la siguiente.

Relacionados: Sincrónico vs. Programación asíncrona: ¿en qué se diferencian?

La programación asíncrona puede reducir el tiempo de ejecución a la mitad, creando efectivamente computadoras más rápidas.

Ejemplo de programa asíncrono

const AsyncCode = () => {
 console.log("Esta es la primera línea del programa")
 establecerTiempo de espera(() => {
 console.log("Esta es la segunda línea del programa")
 }, 3000)
 console.log("Esta es la línea final del programa")
}
CódigoAsíncrono();

Ejecutar el código JavaScript anterior producirá el siguiente resultado en su consola:

Esta es la primera línea del programa.
Esta es la línea final en el programa.
Esta es la segunda línea del programa.

Si compara la salida de la consola anterior con el programa asincrónico que la genera, verá que hay una discrepancia obvia. la llamada a Iniciar sesión que dice “Esta es la segunda línea del programa” ocurre antes que el que dice “Esta es la última línea del programa”. Sin embargo, la salida de la consola no refleja esto.

Dado que JavaScript es principalmente síncrono, el código del programa anterior se ejecutó secuencialmente. Pero JavaScript admite la programación asíncrona a través de características como la establecerTiempo de espera() método.

los establecerTiempo de espera() method es un método asincrónico de JavaScript que toma dos argumentos: una función y un retraso. El retraso es un temporizador (en milisegundos), que retrasa la ejecución de la función. Entonces, mientras el programa anterior está esperando los tres segundos para ejecutar la función en el establecerTiempo de espera() método, pasa a la siguiente línea del código. Esto da como resultado la ejecución de la tercera llamada de función antes que la segunda.

Tecnologías JavaScript asincrónicas

Aparte de la establecerTiempo de espera() método mencionado anteriormente, varias tecnologías de JavaScript utilizan programación asincrónica. Estas tecnologías utilizan el modelo de programación asincrónica para desarrollar aplicaciones sin bloqueo más rápidas. Algunas de estas tecnologías incluyen:

• jQuery Ajax
• Axios
• NodoJS

Relacionados: ¿Qué es Node.js? Aquí se explica cómo usar JavaScript del lado del servidor

Creación de programas asincrónicos con JavaScript

Hay varias formas de manejar el código asíncrono. El método que elija dependerá del tipo de aplicación que desee desarrollar. Estos métodos incluyen funciones de devolución de llamada, promesas y async/await.

Funciones de devolución de llamada

Hay dos propiedades importantes de una función de devolución de llamada. Sirven como parámetros para otras funciones y dependen de eventos externos para cumplir con su deber. los establecerTiempo de espera() El método utilizado en el ejemplo asincrónico anterior es una función de devolución de llamada. El programa le pasa una función de registro como parámetro (la función de devolución de llamada) y solo la ejecuta después de tres segundos (el evento).

Las funciones de devolución de llamada son excelentes para programas pequeños, pero a medida que crecen sus aplicaciones, pueden volverse demasiado complicadas muy rápidamente. Esto se debe a que las funciones de devolución de llamada a menudo llaman a otras funciones de devolución de llamada, creando una cadena de devoluciones de llamada anidadas.

usando promesas

JavaScript agregó soporte para promesas después de las funciones de devolución de llamada. Son una buena alternativa a la hora de crear aplicaciones más grandes. Una promesa representa lo que podría suceder después de una operación asincrónica. Este resultado potencial tomará una de dos formas: resuelto o rechazado. Una función separada maneja cada uno de estos resultados, eliminando la necesidad de anidar (el problema de la función de devolución de llamada). En cambio, las promesas fomentan funciones de cadena que son más fáciles de usar.

Cada promesa comienza con una nueva Promesa objeto que tiene una función anónima con el resolver y rechazar parámetros Dentro de esta función, tendrá la aplicación asíncrona, que devuelve una resolución si la operación asíncrona tiene éxito, o un rechazo en caso contrario.

los luego() La función de cadena maneja el resolver función, y la atrapar() La función de cadena maneja el rechazar función. Por lo tanto, no hay necesidad de declaraciones if anidadas, como es el caso de las funciones de devolución de llamada.

Ejemplo de uso de promesas

const PromiseFunction = () =>{
 volver nueva Promesa((resolver, rechazar) => {
 establecerTiempo de espera(() => {
 resolve("esta operación asíncrona se ejecutó bien")
 }, 3000)
 })
}
PromiseFunction().then((resultado) => {
 console.log("Éxito", resultado)
}).catch((error) => {
 consola.log("Error", error)
})

El código anterior devuelve el siguiente resultado en la consola:

Éxito, esta operación asíncrona se ejecutó bien

Esto se debe a que la promesa devuelve el resolver función, que pasa sus resultados a la luego() función. Si la promesa devuelve el rechazar función que utiliza el programa atrapar función en su lugar.

Uso de Async/Await

Si no desea crear una cadena de promesa cuando se trata de operaciones asincrónicas, puede probar async/await. Async/await no es una herramienta asíncrona completamente diferente de las promesas, solo una forma diferente de manejarlas. Maneja promesas sin usar el método de la cadena. Entonces, de la misma manera que las promesas manejan las operaciones asincrónicas mejor que las funciones de devolución de llamada, async/await tiene beneficios sobre las promesas simples.

Hay dos atributos clave de cada función async/await. empiezan con el asíncrono palabra clave y la esperar palabra clave espera el resultado de una operación asíncrona.

Ejemplo de programa Async/Await

const PromiseFunction = () =>{
 volver nueva Promesa((resolver, rechazar) => {
 establecerTiempo de espera(() => {
 resolve("esta operación asíncrona se ejecutó bien")
 }, 3000)
 })
}
const AsyncAwaitFunc = asíncrono () => {
 const resultado = espera PromiseFunction();
 consola.log (resultado);
}
AsyncAwaitFunc();

El código anterior devolverá el siguiente resultado en la consola:

esta operación asíncrona se ejecutó bien

¿Cuáles son las principales conclusiones?

Hay varios puntos importantes que debe tomar de este artículo:

• La programación asíncrona es valiosa porque reduce el tiempo de espera de un programa, creando aplicaciones más rápidas.
• Una función de devolución de llamada puede ser síncrona o asíncrona.
• Las promesas ofrecen una mejor manera de manejar las operaciones asincrónicas que las funciones de devolución de llamada.
• Las funciones asíncronas/en espera manejan las promesas de una mejor manera que usar funciones de cadena.
• Una función async/await maneja las operaciones asíncronas de una manera que parece síncrona, lo que facilita su comprensión.
• Las funciones de flecha te ayudan a escribir mejor código.

Las funciones de flecha de JavaScript pueden convertirlo en un mejor desarrollador

¿Quieres ser mejor en el desarrollo web? Las funciones de flecha, agregadas a JavaScript ES6, le brindan dos formas de crear funciones para aplicaciones web.

Leer siguiente

Sobre el Autor