6

Quisiera convertir una Promesa a un objeto para trabajar de manera síncrona en vez de asíncrona a partir de cierto punto.

Da el caso que últimamente me he estado hallando este pequeño inconveniente, que al momento en que a tu código Javascript le empiezas a meter promesas no puedes ya jamás deshacerte de ellas, y muchos frameworks aún no están preparados para recibir promesas en vez de valores concretos (, cof cof).

Por ello lo que quiero es que en mi código en vez de regresar una promesa regrese un valor, algo similar a esto:

obtenerValorMaximo(misDatosDentroDeUnaPromesa){
 let misDatos = Promise.resolve(misDatosDentroDeUnaPromesa);
 return misDatos.length-1;
}

Obviamente misDatosDentroDeUnaPromesa sería de tipo por ejemplo Promise<Array<String>>(si lo pensamos en typescript) o algo similar y mi función buscaría regresar un number.

¿Cómo puedo lograr el resultado que deseo?

11
  • puedes dejar tu codigo y decirnos que te devuelve actualmente?
    – sioesi
    Commented el 11 jun. 2020 a las 20:34
  • Mi código son unos cuantos cientos de líneas de vue2, pero el problema es en algún punto dejar de usar promesas. Es posible? Commented el 11 jun. 2020 a las 20:36
  • 6
    No puedes convertir código asíncrono en código sincrónico. Por otro lado, sin saber lo que quieres lograr exactamente es difícil darte una respuesta razonable. Dices: muchos frameworks aún no están preparados para recibir promesas en vez de valores concretos ¿No será que algo falta en tu lógica para que logres trabajar correctamente con procesos asíncronos? Nuevamente, sin ver el código es difícil decirlo. Saludos Commented el 11 jun. 2020 a las 20:43
  • 3
    En JavaScript no puedes. Si un flujo de trabajo es asíncrono, será asíncrono de arriba a abajo. Aunque uses async/await, sólo estarías trabajando con Promises "under the hood". Otros lenguajes como C# sí ofrecen esto, bloquear el current thread para resolver una Task<> de forma síncrona.
    – VRoxa
    Commented el 11 jun. 2020 a las 21:49
  • 3
    Si el problema es que usas frameworks que no soportan el trabajo con Promise, entonces deberás hacer un poco (tampoco tanto) de trabajo para implementar la capa asíncrona por tu cuenta sin usar async/await sinó con raw Promise.
    – VRoxa
    Commented el 11 jun. 2020 a las 21:51

3 respuestas 3

21

Ya te han dado 2 respuestas que aclaran un punto muy importante:

NO SE PUEDE1 en obtener valores de forma sincrónica de procesos asíncronos. Y esto se debe a la implementación del lenguaje.

¿Single-Threading o Multi-Threading?

Javascript es un lenguaje que no permite la concurrencia clásica o lo que comúnmente se conoce como ejecución multi-hilos. Esto significa que todo el proceso de una aplicación corre siempre sobre un mismo hilo y no se pueden crear otros hilos a partir de un mismo proceso. Esto fue una decisión de diseño (hablamos de cuando Internet estaba en su estado más incipiente). Es así que Javascript es un Lenguaje Interpretado de hilo único (Single-threaded).

Event Loop

Dada la naturaleza de hilo único, los procesos de I/O resultan particularmente bloqueantes, es decir, no teniendo la posibilidad de delegar en otro hilo la lectura / escritura de datos de tipo stream (como la lectura de archivos o las peticiones http) se introdujo en el lenguaje el concepto de ciclo de eventos (Event Loop) para poder manejar la concurrencia y así evitar que los procesos bloqueantes detengan la ejecución del código. Esto permite seguir realizando tareas sin que el proceso se bloquee esperando por un resultado de alguna tarea bloqueante.


Lista la teoría básica, veamos de poder usar las herramientas del lenguaje para poder trabajar con el ciclo de eventos.

Según el código aportado en tu pregunta, tienes un proceso asíncrono (misDatosDentroDeUnaPromesa) y deseas que una función te permita acceder a los datos que habrá en un futuro disponibles por la resolución de una Promesa.

Y eso es como intentar adivinar el futuro antes de que los eventos de dicho futuro siquiera ocurran.

Dr. Strange - Marvel

Veamos un ejemplo:

// esta es una Promesa común y corriente
let miPromesa = new Promise((resolve, reject) => {
  const lema = 'Viva Thanos';
  console.log(`El lema que voy a devolver es: "${lema}"`);
  return resolve(lema);
});

//intentaremos usar el resultado de nuestra promesa en una función:

function obtenerLema(promesa) {
  return promesa.then(lema => {
    console.log(`La promesa me acaba de devolver el siguiente lema: "${lema}"`);
    // devuelvo el lema
    return lema
  });
}

const lemaObtenido = obtenerLema(miPromesa);
// ¿qué tiene lemaObtenido?
console.log(lemaObtenido);

// ¿será una Promesa?
lemaObtenido.then(console.log);

Claro, en tu código intentas hacer algo como lo siguiente:

Promise.resolve(misDatosDentroDeUnaPromesa);

Y volvemos al perro que se persigue la cola, ya que: El método Promise.resolve(value) retorna un objeto Promise.

La conclusión de todo esto es: Toda Promesa devolverá un resultado (si la misma es resuelta) en un momento futuro. Y por futuro me refiero a un momento en el que el resultado de dicha Promesa haya sido alcanzado por el ciclo de eventos. Es decir, en el momento en que el mensaje del resultado de la Promesa sea sacado de la pila de mensajes. Y esto ocurrirá cuando todos los mensajes que hubiesen en la pila de mensajes, antes del resultado de la Promesa, ya han sido procesados. Eso hace imposible asignar o reservar una dirección de memoria al resultado de una Promesa, ya que el mismo aún no está disponible. Y eso hace también imposible sacar el valor de la Promesa resuelta fuera del método then().

Un truco, es envolver todo tu código en una función tipo async autoejecutada y de esta forma podrías simular un comportamiento sincrónico al usar la sentencia await.

Veamos:

(async function miPrograma(){
  // esta es una Promesa común y corriente
  let miPromesa = new Promise((resolve, reject) => {
    const lema = 'Viva Thanos';
    console.log(`El lema que voy a devolver es: "${lema}"`);
    return resolve(lema);
  });

//intentaremos usar el resultado de nuestra promesa en una función:

  async function obtenerLema(promesa) {
    try {
      let lema = await promesa;
      console.log(`La promesa me devolvió: "${lema}"`);
      return lema;
    }
    catch(e) {
      console.error(e);
      throw e;
    }
  }

  try {
    const lemaObtenido = await obtenerLema(miPromesa);
    // ¿qué tiene lemaObtenido?
    console.log(lemaObtenido);
  }
  catch(e) {
    console.error(`Ocurrió un error: ${e.message}`);
  }
})();

Ahora el comportamiento simula un código sincrónico, pero debes tomar en cuenta que las variables declaradas dentro de tu función autollamada no estarán disponibles en el entorno Global. A esto se le conoce como Clausura.

Podríamos pasar horas explicando el porqué no puedo simplemente declarar una variable global y dejar que mi función async le asigne un valor, lo cierto es que eso no ocurrirá hasta que el proceso asíncrono devuelva un resultado, pero como no conozco con certeza cuándo ocurrirá esto, siempre deberé esperar. Y la espera puede ser larga o corta.

Web API: CustomEvent (Tema extra)

En tu pregunta planteas lo siguiente: Quisiera convertir una Promesa a un objeto para trabajar de manera síncrona en vez de asíncrona a partir de cierto punto.

Ya vimos que no podemos adivinar el futuro, a menos que tengamos las capacidades de nuestro amigo el Dr. Strange.

Como no podemos traer datos del futuro, podemos crear Objetos que reaccionen cuando un dato a futuro esté disponible.

En Angular (por ejemplo) tenemos el concepto de Observable, el cual se basa principalmente en la librería RxJS. Sin embargo, en Javascript vanilla podemos hacer uso de la interfaz CustomEvent.

La idea es escuchar eventos que ocurran en algún momento futuro, y actuar de acuerdo al mensaje de dicho evento.

Tan sencillo como cuando haces la cola en alguna entidad bancaria y te asignan un ticket con un número de turno. Te quedas sentado (o de pie en la mayoría de los casos) esperando que tu número sea llamado o aparezca en pantalla. Tu reacción, cuando salga tu número, será acercarte a la taquilla indicada. No te acercarás antes que te llamen porque sabes que no te van a atender, y si te acercas mucho después que salga tu número te dirán que el turno pasó y debes tomar otro número.

Basado en este comportamiento, podemos crear un Objeto que implemente la Interfaz CustomEvent y luego escuchar los eventos de este Objeto para realizar tareas específicas.

Los eventos no son nada desconocidos en la programación web, trabajamos con ellos constantemente. Incluso existen atributos HTML que indican un evento sobre un elemento del DOM.

Supongamos que necesito realizar una tarea basándome en datos de un proceso asíncrono, por ejemplo, mostrar en pantalla el valor del resultado de una consulta http. Es una tarea típica.

Pero no quiero usar Promesas ni async ni await ni nada que se le parezca. ¿Cómo lo hago?

¿Otra Promesa?

Pues vamos a crear eventos personalizados. Como no voy a profundizar en detalles de la implementación de un Objeto que despache eventos y al que podamos suscribirnos, usaré la interfaz Document que ya implementa todo esto por nosotros.

Además usaremos la API Fetch para obtener recursos externos.

Vamos a escribir 1 método que ejecutará una llamada a fetch:

  • getName(): Obtendremos un nombre aleatorio

Con esto en mente vamos a implementar nuestro código:

// método que asignamos al Objeto Document
Document.prototype.fetchName = function() {
  fetch('https://randomuser.me/api/?inc=name')
  .then(response => {
    return response.json();
  })
  .then(json => {
    let first = json.results[0].name.first;
    let last = json.results[0].name.last;
    // evento personalizado al cual podemos agregar
    // un objeto con el valor que pasaremos al
    // método encargado de processar el evento
    const nameEvent = new CustomEvent('nameFetched', {
      detail: {
        name: `${first} ${last}`
      }
    });
    // despachamos el evento.
    document.dispatchEvent(nameEvent);
  });
}

// función menjadora del evento, toda nuestra lógica
// para manejar el resultado del evento vive aquí
const onNameFetched = e => {
  console.log(e.detail.name);
}

// agregamos el método para escuchar el evento
document.addEventListener('nameFetched', onNameFetched);

// llamamos al método para obtener el nombre.
document.fetchName();

Como puedes observar, el código que manejará el resultado vive dentro del método que escucha el evento creado. Y el código de ese método se ejecutará cada vez que el evento sea disparado.

Ahora con esto, que no es sino una forma de trabajar con procesos asíncronos, puedes establecer la lógica de tu programa usando los métodos que escuchen eventos particulares por ti creados.

Nuevamente, el valor del dato pasado en el campo detail del evento no estará disponible en el ámbito global, ya que no tienes certeza de cuando se recibirá o se dispará el evento.

Espero que esto aclare aún más las ideas ya aportadas en las otras respuestas.

Notas

1 Bueno, o sea, sí se puede, pero no te vas a librar de trabajar de manera asíncrona. Básicamente usas promesas, las guardas en un arreglo y llamas a Promise.all(miArregloDePromesas).

3
  • 2
    +1 Por esta cantidad de detalle, me encanta la calidad de esta respuesta.
    – Layer
    Commented el 12 jun. 2020 a las 15:34
  • hay algo que no queda claro en tu respuesta, que no esta en esta Pregunta pero si esta en la mía.
    – user46896
    Commented el 7 nov. 2021 a las 19:58
  • tu respuesta esta basada en un código procedural, que esta sobre la base del documento; que pasa cuando intentas trabajar todo esto dentro de una clase; en donde tienes limitaciones del scope y quieres utilizar y compartir los datos usando propiedades de una clase en lugar de una variable...
    – user46896
    Commented el 7 nov. 2021 a las 20:00
6

Muchos frameworks aún no están preparados para recibir promesas en vez de valores concretos

No comprendería en lo absoluto que un framework tan popular y usado como lo es vue.js tenga problemas con las Promises, supongo que es un problema de versiones, porque hasta donde se son soportadas.

De todas maneras, por si acaso te dejo una posible solucion de tu problema para que puedas mirar si funciona:

async obtenerValorMaximo(misDatosDentroDeUnaPromesa){
 let misDatos = await misDatosDentroDeUnaPromesa;
 return misDatos.length - 1;
}

Las unicas cosas que han cambiado es que ahora la funcion obtenerValorMaximo es asincrona y ademas la asignacion de misDatos es directamente el await de tu parametro.

Supongo no habra que decirlo, pero para que otros usuarios menos avanzados puedan entender estos conceptos tambien hay que decir que:

  • async hace que la funcion siempre retorne una promise y ademas la convierte en asincrona.
  • await no puede ser usado en el contexto global y solo puede ser usado en contextos asincronos (donde se pueda usar la palabra reservada async).
  • await hace que la ejecucion del programa se pause hasta que una promise sea resuelta o rechazada, NO hace las vecez de un return puesto que en vez de retornar el valor de la promise una vez se obtiene, lo que hace es ya sea resumir la ejecucion (si no hay errores), o detener la ejecucion (si hay errores).

Suponiendo deseas usar el valor de retorno de la funcion obtenerValorMaximo en algo que no sea el contexto global, por ejemplo otra funcion, entonces puedes hacerlo de esta manera:

const datos = new Promise((res, rej) => res(["dato1", "dato2", "dato3"]));

async function obtenerValorMaximo(misDatosDentroDeUnaPromesa){
  let misDatos = await misDatosDentroDeUnaPromesa;
  return misDatos.length - 1;
}

function usarDatosPromise(promise){
  obtenerValorMaximo(promise).then(data =>{
    //Aqui usarias de manera normal los datos traidos por la ejecucion
    //de la funcion obtenerValorMaximo
    console.log(data);
  });
}

usarDatosPromise(datos);

De esa manera usarias la promise a tu favor.

Seguro ahora estaras diciendo:

No deseo obtener otra promise y usarla con .then o .catch, yo solo quiero directamente el valor de la promise y ya, no necesito obtener otra promise.

La respuesta corta es:

No se puede.

Una Promise, al igual que una funcion asincrona, JAMAS, podran devolverte directamente un valor, simplemente no hay forma o no se puede convertir codigo asincrono para manejarlo como sincrono, hay que entender que las promises fueron creadas para poder manejar codigo asincrono de tal forma que el flujo sincrono pueda hacer uso en algun momento de los valores del codigo asincrono, pero solo cuando estos hayan sido resueltos o rechazados.

La unica forma que tiene el codigo sincrono para poder usar estos valores es haciendo un wrapper con delay, el cual se disparara con el cuerpo de tu codigo cuando la promesa haya sido resuelta o rechazada.

Es por eso que en la antiguedad, el codigo asincrono era manejado directamente por funciones y callbacks.

Ahora es manejado con promises y funciones asincronas, donde las funciones asincronas no son mas que el wrapper del cuerpo de una promise.

Actualmente todo esto puede resumirse un poco mas usando await, pero el hecho de usar await no cambia que siempre habra una promise por detras, la cual siempre requerira de un cuerpo, cuerpo el cual sera ejecutado por la promise al momento de resolverse o rechazarse.

Este es el motivo del porque no podemos obtener valores de una promise de manera directa, porque una promise requiere de uno o 2 cuerpos (callbacks), en el que uno de ellos sera ejecutado con la informacion del error o el valor de la promise listo para usarse.

3
  • 3
    Muy útil respuesta. Es orientativa y ayuda a comprender mejor lo que son las promesas. Commented el 12 jun. 2020 a las 3:11
  • 3
    desafortunadamente tu función usarDatos no está regresando nada, así que tu respuesta no me sirve. Saludos. Commented el 12 jun. 2020 a las 10:19
  • 1
    Como ya han explicado muchos usuarios amigo, porfavor lee bien mi respuesta, aquello que preguntas es imposible, te estamos dando es otras vias.
    – Layer
    Commented el 12 jun. 2020 a las 15:32
2

Debes usar async y await en este caso.


function who() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Prueba');
    }, 200);
  });
}

function what() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('de methodos');
    }, 300);
  });
}

function where() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('async await');
    }, 500);
  });
}

/*Sin async await*/
function test() {
  console.log("Entro a la funcion test");
  who()
  .then((response) => {
    console.log(`response who: ${response}`);
    console.log("Llamando a what");
    what()
    .then((response) => {
      console.log(`response what: ${response}`);
      console.log("Llamando a where");
      where()
      .then((response) => {
        console.log(`response where: ${response}`);
        console.log("termino");
      });
    });
  })
  console.log("ultima linea de la funcion test");
}

/* Con async/await */
async function msg() {
  const a = await who();
  const b = await what();
  const c = await where();

  return [a, b, c]
}

async function testing() {
  const retorno = await msg()
  const transformado = retorno.map(v => v.toUpperCase())
  console.log(transformado)
}

await testing()
5
  • msg no está regresando nada, y si lo hiciera sería una promesa, así que no me sirve tu ejemplo amigo. Tal vez con algo similar a ()=> let mivalor; (async ()=>await mivalor= funcionconpromesa())() return mivalor; aunuqe no esoty totalmente seguro de que eso no me regrese una promesa. Commented el 11 jun. 2020 a las 21:34
  • @RuslanLópez No esta devolviendo nada porque no tiene un return. Podrias probar cambiando el codigo y retornando las 3 variables Commented el 11 jun. 2020 a las 21:37
  • Y ese es el problema, todo el tiempo estás trabajando con promesas en tu código, en ningún momento dejas de hacerlo. Commented el 11 jun. 2020 a las 21:38
  • claro, porque no puede pasar codigo async a sync, por lo mismo, cuando llamas a la función, debes llamarlo con await, con eso, podras seguir trabajando. Recuerda que estan trabajando con un lenguaje funcional, por ende, siempre debes respetar la logica que estas utilizando desde adentro hacia afuera Commented el 11 jun. 2020 a las 21:43
  • @RuslanLópez si bien el codigo ejemplo no se relaciona del todo con el tuyo, este codigo muestra el como podrias usar las promises a tu favor para que el flujo se trate como sincrono y por lo tanto aunque tengas que usar promises tu codigo funcione de manera correcta y puedas obtener la data de la promise directamente, de todas maneras siempre es bueno recordar que en el scope global NO hay forma de usar await (no es posible), por lo tanto, aquello que deseas lograr es simplemente imposible, puesto que la alternativa que es usar una funcion asincrona te devolvera igual una promise.
    – Layer
    Commented el 11 jun. 2020 a las 23:31

Tu Respuesta

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

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