Ya te han dado 2 respuestas que aclaran un punto muy importante:
NO SE PUEDE1 en javascript 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.
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?
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)
.
async/await
, sólo estarías trabajando conPromises
"under the hood". Otros lenguajes como C# sí ofrecen esto, bloquear el current thread para resolver unaTask<>
de forma síncrona.Promise
, entonces deberás hacer un poco (tampoco tanto) de trabajo para implementar la capa asíncrona por tu cuenta sin usarasync/await
sinó con rawPromise
.