6

Tengo una duda acerca de lo que hacen las promesas en la funcion constructora Promise:

function promiseCallback(res, rej){
  AsyncOperation((error, result) => {
    if (result){
      res();
    } else if (error){
      rej();
    }
  })
}
let promesa = new Promise(promiseCallback);

En este ejemplo se supone que la funcion constructora Promise estaria llamando al callback que le pasamos por parametro (promiseCallback) en el mismo codigo del constructor, lo que quiere decir que la funcion constructor Promise haria algo asi en su codigo ...

function Promise(callback){
    callback(spoiler : aqui esta la duda);
    ...
}

Pues bien, tambien se supone que la funcion promiseCallback solo puede ser llamada pasandole por parametro los callbacks res y rej, teniendo esto en cuenta : como es que se ejecuta promiseCallback desde el constructor Promise si este mismo aun no conoce los valores de rej ni de res (los parametros que recibe promiseCallback), los cuales se supone, definimos a traves de then y catch, metodos que aun no hemos usado?

1
  • Me encantaría levantarle una bandera a esta pregunta por el cuerpo de la misma, pero ni se me ocurriría hacerlo, tan solo por el hecho de que considero su título uno de los más bellos e intrigantes con los que me he topado. También me gustaría ofrecer una recompensa por una buena respuesta, pero carezco de los suficientes puntos (que pueda perder) para hacerlo. @Eugim en su respuesta reformula el código ("eso creo") de manera más comprensible, pero no me aclara nada. Y el uso de ArrowFunctions me confunden aún más. el 7 ene. a las 5:35

2 respuestas 2

2

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:

introducir la descripción de la imagen aquí

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.

1
  • Bueno, basicamente he tildado lo ultimo que hice y ya no funciona ya que intente replicarlo lo maximo posible al funcionamiento de una promise, supongo ya mañana arreglo la ultima parte de la respuesta para que se entienda que pasa del lado de la promise y funcione.
    – Layer
    el 30 jun. a las 5:03
0

Te lo explico con código, seguramente te quede mas claro todo:

const getDatos = async (ubicacion) => {
  const response = await fetch(ubicacion);
  const json = response.json();
  return json;
};

const url = 'https://jsonplaceholder.typicode.com/users';


const resolver = (res, rej) => {
  getDatos(url).then(d => {
    if (d.length > 0) {
      res(d)
    } else {
      rej("ERROR: sin datos")
    }
  })
}

let myPromise = new Promise(resolver)

const handleResolve = (data)=>{
  console.log(data)
}
const handleReject = (data)=>{
    console.log(data)
}


myPromise.then(handleResolve, handleReject)

Entonces: cuando instanciamos un objeto de tipo 'promise', osea, const x = new promise(), lo que sucede es que se asigna una funcion cualquiera al constructor, pero este constructor esta esperando 2 parametros(res, rej), este lo asigna internamente a una variable, la cual almacena la funcion, para luego ejecutarla, una vez que consigue el resultado, recien ahi, nos retorna si se 'resolve' (se resolvio correctamente), o hubo un error, osea hace un catch o algo similar en 'reject'. Entonces, en resolve le podemos pasar otra funcion, la cual se va a ejecturar si todo sale bien. y en reject , le podemos pasar otra funcion en caso de que algo fue mal. Miren esto en el codigo que les deje mas arriba:

    if (datos.length > 0) {
          res("mustro los datos")
        } else {
          rej("ERROR: sin datos")
    }

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.