Existe el concepto de función asincrona apartir de ES7
si no estoy mal, junto con ello también vino el objeto Promise
y una nueva forma de usar código JS
.
Anteriormente para manejar codigo asincrono por javascript lo que se hacia era usar callbacks e internamente lo que hacia el codigo era esperar la respuesta para devolver un valor, es un poco dificil de explicar, por lo que primero te muestro el ejemplo de algo viejo:
function divideByZero(value, callbackOnSuccess, callbackOnFail)
{
try
{
//Forzamos un error en caso de que dividamos 0 / 0
if(value === 0)
throw new Error("Division por cero!");
setTimeout(callbackOnSuccess, 2000, value);
}
catch(e)
{
return callbackOnFail(e);
};
}
function onSuccessDivision(number)
{
console.log("No hay una indeterminacion!");
}
function onFailDivision(e)
{
console.log("El numero es una indeterminacion!");
}
divideByZero(2, onSuccessDivision, onFailDivision);
divideByZero(0, onSuccessDivision, onFailDivision);
Esta seria una de las formas mas primitivas en JS
de representar asincronismo,
como podemos ver el primer valor es pasado como argumento de la funcion de nuestro callbackSuccess
:
setTimeout(callbackOnSuccess, 2000, value);
De esta manera en la ejecución la funcion se ejecutara con los valores que le pasemos.
luego si quisiéramos pasarnos a ES6
y usando un ejemplo mas completo:
const divideByZero = (...arguments) =>
{
const values = arguments.slice(0, arguments.length - 2);
const [callbackOnSuccess, callbackOnFail] = arguments.slice(-2);
try
{
//Forzamos un error en caso de que dividamos 0 / 0
const hasZero = values.includes(0);
if(hasZero)
throw new Error("Division por cero!");
setTimeout(callbackOnSuccess, 2000, ...values);
}
catch(e)
{
return callbackOnFail(e);
};
}
const onSuccessDivision = (...numbers) =>
{
console.log(`Ejecucion exitosa con los valores: ${numbers.join(",")}`);
};
const onFailDivision = e => console.log(e.message);
divideByZero(2, 3, 4, onSuccessDivision, onFailDivision);
divideByZero(0, 1, 2, onSuccessDivision, onFailDivision);
Fijate como en este ejemplo es mas rapido al indicarnos que hay un error y nos marca el resultado de la segunda ejecucion antes que el primero, simulando realmente una llamada asíncrona.
Entonces luego y a raiz de la forma como funcionan los callbacks resulta que podriamos encadenarlos:
const soyUnCallback = (duration, onSuccess, onError) =>
{
setTimeout(onSuccess, 1000 * duration, duration);
}
//Copiamos la funcion, es solo para ilustrar que se trata de otra operacion
//Pero sabemos que es exactamente la misma funcion
const soyUnCallback2 = soyUnCallback;
const soyUnCallback3 = soyUnCallback;
soyUnCallback(1,
duration => {
soyUnCallback2(
duration * 2,
duration2 => {
soyUnCallback3(
duration2 * 2,
() => console.log("Termine mi ejecucion del callback hell!"),
error3 =>
{
console.log(error3);
}
)
console.log("Ejecucion 3");
},
error2 => {
console.log(error2);
}
);
console.log("Ejecucion 2");
},
e =>
{
console.log(e);
}
);
console.log("Ejecucion 1");
Como vemos se genera un problema terrible, puesto que al manejar callbacks el codigo queda desastroso, y si bien es verdad que puede organizarse de mejor forma para que quede mas organizado, la idea en programacion es siempre tener la menor cantidad posible de niveles de anidacion para poder realizar un codigo limpio y legible.
Los callback hell
basicamente fueron la razon por las que se implementaron las funciones asincronas
y la palabra reservada await
ademas de las promises, pues ahora esta barbaridad que hemos hecho la podemos traducir a lo siguiente usando promises
y await
:
(async()=> {
const promiseFactory = duration => new Promise((res, rej) => setTimeout(res, 1000 * duration, duration));
const soyUnCallback = (await promiseFactory(1)) * 2;
console.log("Ejecucion 1");
const soyUnCallback2 = (await promiseFactory(soyUnCallback)) * 2;
console.log("Ejecucion 2");
const soyUnCallback3 = (await promiseFactory(soyUnCallback2)) * 2;
console.log("Termine la ejecucion!");
})();
Lo cual es MUCHISIMO mas legible y sostenible en el tiempo, notese que no use .then
o .catch
, no significa que no deban usarse, pero asegurate de usarlos bien, si no vas a terminar creando un promise hell
.
Este ultimo ejemplo se presta para Promise.all
, pero no lo revisaremos aqui ya que se extenderia mucho la respuesta.
Ahora bien
Preguntas por lo que pasa internamente a una Promise
cuando es
creada y como es que esta se resuelve o rechaza con un valor antes de
tenerlo.
Entenderlo es bastante sencillo y para ello vamos a ver gráficamente el prototipo de una Promise
desde la consola:

Vemos entonces que cuando llamamos al constructor de una Promise
(que por cierto podemos ver que se trata de una clase al tener un constructor), se crean dos métodos esenciales para nosotros:
- resolve: Devuelve una promise y lo llena con el estado
fullfilled
y devuelve el valor.
- reject: Devuelve una promise y lo llena con el estado
rejected
y devuelve un error con el mensaje especificado por nosotros.
Que por cierto se me ha olvidado mencionar que una Promise
tiene 3 posibles estados y que el estado pending
es el por defecto hasta que la promesa sea resuelta o rechazada, mientras este en estado pending el valor devuelto de la promesa estara por asi decirlo en "stand by" o en el limbo mientras se produce un error o se resuelve la operacion.
Estados de una promise:
- pending
- fullfilled
- rejected
Basicamente al momento de crear una Promise
internamente pasa lo siguiente:
class PromesaInterna
{
constructor(callback)
{
this.resolve ??= callback;
this.reject ??= callback2;
}
}
//Equivalente al promise.resolve original
const onResolve = dt => {
//Aqui devuelve enrealidad una nueva promise con el estado fullfilled
//y el valor
return {
"<state>": "fullfilled",
"<value>": dt
}
};
//Equivalente al promise.reject original
const onReject = msg => {
console.error(msg);
//Aqui devuelve enrealidad una nueva promise con el estado rejected
//y el valor
return {
"<state>": "rejected",
"<reason>": msg
}
}
const nuevaPromise = new PromesaInterna((onResolve, onReject) => {});
console.log(nuevaPromise.resolve([0, 1, 2, 3, 4]));
console.log(nuevaPromise.reject("Promesa rechazada!"));
Si bien esto no es exactamente lo que ocurre en una promise internamente, lo que quiero dar a entender es que basicamente el constructor adquiere y pasa como argumentos de funcion nuestros callbacks de resolve y reject, para posteriormente hacer uso de ellos y devolver otra Promise en funcion de si usamos ya sea .then
, .catch
, await
, etc.