En el capítulo anterior veíamos como trabaja el Event loop en Javascript, las características de la asincronía, donde vamos a tener operaciones de entrada y salida en un sólo hilo de procesos, ya que Javascript es un lenguaje Single thread, y la manera en que se están apilando las tareas, estas tareas van a ser asíncronas, es decir, no esperan resolverse en el presente inmediato sino en el futuro, y no son bloqueantes, es decir, no se van a esperar y van a detener el flujo del programa o aplicación mientras retorna su respuesta, sino que inmediatamente que se ejecutan, van a regresar el control al hilo principal del programa, y en el momento que la respuesta esté lista enviarán una notificación y se ejecutará el resultado.
Mecanismos para trabajar la asincronía
Para trabajar la asincronía, Javascript dispone de diferentes mecanismos que son los que vamos a ver en los siguientes capítulos.
Callbacks
El primer mecanismo que vamos a ver son las Callbacks. Una Callback o llamada de vueltas es una función que se va a ejecutar después de que otra lo haga, de hecho es el mecanismo por excelencia que tiene Javascript incluso para invocar algunas de sus funciones.
Hay que recordar, como vimos en capítulos pasados, que las funciones son ciudadanos de primer orden, porque con las funciones podemos hacer de todo, como simular la orientación de objetos a través de funciones constructoras, retornar una función como el valor de retorno de otra, podemos pasar como parámetros funciones, crear funciones autoinvocadas, anónimas… Las funciones juegan un rol muy principal en la programación con Javascript, y el Callback es el primer mecanismo que tiene Javascript para poder trabajar con la asincronía.
Imaginemos que necesitamos trabajar varias Callbacks anidadas, ésto va a generar lo que se conoce como Callback Hell.
Como trabaja una Callback
Vamos a hacer un ejm de código Javascript utilizando lo que se denomina recursividad, que es que la función se invoca a sí misma dentro de sí, y esto es lo que va a ir generando el Callback.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asincronía - Callbacks</title>
</head>
<body>
<h1>Asincronía - Callbacks</h1>
<script>
function cuadradoCallback(value, callback) {
setTimeout(() => {
callback(value, value * value);
}, 0 || Math.random() * 100);
}
cuadradoCallback(0, (value, result) => {
console.log("Inicio callback");
console.log(`Callback: ${value}: ${result}`);
cuadradoCallback(1, (value, result) => {
console.log(`Callback: ${value}: ${result}`);
cuadradoCallback(2, (value, result) => {
console.log(`Callback: ${value}, ${result}`);
});
});
});
</script>
</body>
</html>
Las Callback nos sirven para controlar los pasos que ha de llevar el código, y que no se salte un código antes que otro. En el ejm de arriba, el siguiente número no se ejecuta hasta que no ha terminado el anterior. El Callback es el primer mecanismo que tenemos para controlar la asincronía, es decir, para todo lo que se espera en nuestra aplicación que vaya funcionando paso a paso, tengamos ese control y no se vayan perdiendo cosas por el camino.
El camino a mejorar una estructura de Callback en un código asíncrono es modularizar y utilizar las promesas, los generadores o las funciones asíncronas, que son los siguientes mecanismos dentro de la asincronía en Javascript que veremos en los proximos capítulos.