Introducción al asincronismo

• Índice
• Javascript Asíncrono

<aside> 💡 Javascript utiliza un modelo asíncrono y no bloqueante, con un loop de eventos implementado con un único thread para sus interfaces de entrada/salida.

</aside>

El asincronismo es básicamente una manera de aprovechar el tiempo y los recursos de nuestra aplicación, ejecutando tareas y procesos mientras otros procesos son resueltos en el background como la llegada de la información de una API, para posteriormente continuar con las tareas que requerían esa información que no tenías de manera instantánea.

Asincronismo vs sincronismo 💡

En lenguajes síncronos al hacer un temporizador para ejecutar una función, todo el código se pausa hasta terminar ese tiempo, mientras que en Javascript u otros lenguajes asíncronos, podemos estar aprovechando ese tiempo para ejecutar otros procesos hasta que ese tiempo termina.

• Ejemplo

Event loop

<aside> 💡 El Event Loop hace que JavaScript parezca ser multihilo a pesar de que corre en un solo proceso.

</aside>

• Javascript se organiza usando las siguientes estructuras de datos

  • Call Stack va apilando de forma organizada las diferentes instrucciones que se llaman del código. Lleva así un rastro de dónde está el programa y en que punto de ejecución nos encontramos.

  

  • Memory Heap es el lugar donde se ubica toda la información de funciones, arrays, objetos y variables.
  • Callback Queue: Es donde agregan a la cola, las tareas programadas para su ejecución.
    • Task Queue. Aquí se agregan las promesas. Esta Queue es la que tiene mayor prioridad.

  

  Cuando la pila de llamadas (Call Stack) está vacía, es decir, no hay nada más que ejecutar, se procesan los mensajes de la cola. Con cada 'tick' del bucle de eventos, se procesa un nuevo mensaje. Este procesamiento consiste en llamar al Callback asociado a cada mensaje lo que dará lugar a un nuevo frame en la pila de llamadas. Este frame inicial puede derivar en muchos más, todo depende del contenido del Callback. Un mensaje se termina de procesar cuando la pila vuleve a estar vacía de nuevo. A este comportamiento se le conoce como: 'run-to-completion'.

  • El Event Loop es un loop que se esta ejecutando todo el tiempo y pasa periódicamente revisando las queues y el stack moviendo tareas entre estas dos estructuras.

  

• El Callstack es la pila de tareas que ejecuta JavaScrip de manera síncrona, o sea, una por una y el navegador realiza la tarea y se la pasa al Callback Queue.

• Ahí el trabajo del Event Loop es estar observando que la pila de tareas este vacía y que el Callback Queue tenga la tarea terminada para ser enviada a la lista de tareas (Callstack) para poder ejecutarla.

• En pocas palabras el Event Loop es un intermediario/observador entre la pila y cola para la distribución de tareas unidireccionales.

Estructura Callback

Los callbacks son el nombre de una convención para usar funciones que llaman a otras en JavaScript. No hay una palabra reservada llamada “callback” en el lenguaje JavaScript que haga que nuestro código sea diferente o especial, es más una convención. Callback es solo la idea que una función necesita hacer una tarea adicional y se devolvera con otro dato para estar completa.

// Un callback es una función que recibe como argumento, otra función.
function sum(num1, num2) {
  return num1 - num2;
}

function calc(num1, num2, callback) {
  return callback(num2, num1);
}
console.log(calc(2, 3, sum));
// 5

// En está ocasión vamos a controlar que es lo que se va a retornar primero.
// Para eso podemos utilizar 'setTimeOut'

function date(callback) {
  console.log(new Date());
  setTimeout(function () {
    let date = new Date();
    callback(date);
  }, 3000);
}
function printDate(dateNow) {
  console.log(dateNow);
}
date(printDate);

Peticiones a APIs usando Callbacks

• **XMLHttpRequest** era la antigua forma de hacer callbacks, era conocida por tener una estructura complicada y un código extenso poco optimizado. Incluso presentaba el problema de poder saturar la pila generando un CallBack Hell.
• La nueva instacia “new Error” de la clase Error son usadas para mostrar bien un mensaje de error en JavaScript.