Introduccion a JS asincrono

La programacion asincronica es una tecnica que permite la realizacion de multiples tareas sin la necesidad de esperar la finalizacion de una anterior, seria algo asi como quitar dependencias.

Esto permite seguir respondiendo a otros eventos, mientas por “detras” se siguen ejecutando otras tareas, las cuales presentaran los resultados cuando esten listas.

Muchas de las funciones de los navegadores (principalmente las mas interesantes) pueden tardar mucho tiempo, y por esta razon son asincronas. Ej:

Entonces por mas que no se vayan a crear nuevas funciones asincronas es bueno saber como funcionan porque el mundo JS parece estar lleno de ellas.

Programacion sincrona

Uno de los grandes problemas de este tipo de metodologia de programacion, son las dependencias para seguir utilizando el programa.

La lectura del programa se da una linea a la vez, en funciones que no requieren mucho poder de computo es imperceptible, pero donde se requieran segundos para entregar el resultado, ya es un problema.

Entonces las FUNCIONES SINCRONAS DE DURACION PROLONGADA serian un problema, porque el programa entero se “detiene” no podemos interacturar con la interfaz hasta que se nos retorne el resultado de lo que sea que se le pidiera.

Controladores de eventos

Los controladores de eventos son realmente una forma de programacion asincrona: el controlador de eventos proporciona una funcion que se llamara, no de inmediato, sino cada vez que ocurra el evento, si el eveneto es la finalizacion de la funcion asincrona, podriamos hacer que la funcion que se ejecute cuando suceda el evento sea, la respuesta de esta funcion asincrona.

Controlador de eventos ⇒ Evento: Finalizacion de funcion asincrona ⇒ Funcion: Resultado de funcion asincrona.

Devoluciones de llamada

Cuando hablamos de devoluciones de llamada hablamos de funciones que se pasan a otras funciones como parametro, para que los datos puedan llegar de manera secuencial segun sean requeridos, los controladores de eventos serian un tipo de devolucion de llamada, ya que a partir del evento escuchado en la interfaz, se desencadenaria una funcion como respuesta. El problema ocurre cuando la funcion desencadenante es otra devolucion de llamada, entonces en la practica hara lo que buscamos, pero la legibilidad y mantenimiento de este tipo de planteamientos es molesto:

function doStep1(init) {
  return init + 1;
}

function doStep2(init) {
  return init + 2;
}

function doStep3(init) {
  return init + 3;
}

function doOperation() {
  let result = 0;
  result = doStep1(result);
  result = doStep2(result);
  result = doStep3(result);
  console.log(`result: ${result}`);
}

doOperation();
//Esta seria una representacion de una funcion que depende del resultado de otras
//en secuencia, esto no tendria errores en un modelo sincrono, porque se leeria parte por part

function doStep1(init, callback) {
  const result = init + 1;
  callback(result);
}

function doStep2(init, callback) {
  const result = init + 2;
  callback(result);
}

function doStep3(init, callback) {
  const result = init + 3;
  callback(result);
}
//esto seria equivalente a la funcion anterior pero en un sistema asincrono
//donde las funciones no necesitarian esperar el resultado d ela anterior para ejecutarse
//por esta razon es que se hace uso de las devoluciones de llamada =>
function doOperation() {
  doStep1(0, result1 => {
    doStep2(result1, result2 => {
      doStep3(result2, result3 => {
        console.log(`result: ${result3}`);
      });
    });
  });
//se le conoce como infierno de la devolucion de llamada o piramide de la perdicion xD
}
//son equivalentes en dos sistemas distintos (sincrono y asincrono), pero la legibilidad
//se nota mas densa y dificil de interpretar, por otro lado si hubiera un error
//seria dificil saber donde esta. 
doOperation();

para solucionar este tipo de situaciones, en JS asincrono moderno se utiliza Promise.

Bibliografia

Glosario de palabras

Buscar conceptos