3

Deseo obtener el valor de una Promesa usando Async Await, sin embargo me devuelve el objeto Promesa y no el valor que deseo, pues necesito ese valor para luego manipularlo con Javascript. El valor está en la propiedad PromiseResult de la Promesa, pero no puedo acceder a ella.

Aquí les dejo mi código:

const request = async () => {
   const response = await fetch('perfil/foto/fotoperfil.png');
   if (response.ok){
      return true;
   }else{
      return false;
   }
   const data = await response.text();
   return data;
}
                    
existe_foto = request();
1

3 respuestas 3

1

Una manera es usar solo funciones async

const request = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  return response.ok;
}

async function Init(){
  let existe_foto = await request();
  console.log(existe_foto);
}

Init();

Aquí es donde creo entender tu problema, que es que en algún punto puedes no poder tener tu función como async, porque es una cadena de nunca terminar, para ocupar await debe ser async para llamar a la función tengo que ocupar await entonces vuelvo a necesitar async

Para estos casos hay que dejar de pensar en el programa con algo lineal, ejecuciones que se realizan una a una desde la línea 1 a la N. Tienes que pensar como eventos que se gatillan cuando sucede algo. "Cuando llegue el dato que he pedido, voy a ejecutar X función" y para eso se usa el then

const request = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  return response.ok;
}

request().then(r =>{
  //la respuesta ha llegado, hace algo con ella
  console.log(r);
});

//lo de arriba se puede resumir como
//request().then(console.log);

Quiero terminar recalcando la importancia de las Promesas, porque en un entorno donde no existe la posibilidad de ocupar otro hilo, es la única forma que procesos largos, como el fetch no te bloquee otros procesos, como por ejemplo la interfaz gráfica.

0
const request = async () => {
  const response = await fetch('perfil/foto/fotoperfil.png');
  if (response.ok) {
    return true;
  } else {
    return false;
  }
  const data = await response.text();
  return data;
}

// Utilizando async/await
async function obtenerFoto() {
  const existe_foto = await request();
  console.log(existe_foto);
  // Aquí puedes manipular el valor de existe_foto como desees
}
obtenerFoto();

// Utilizando then()
request().then(existe_foto => {
  console.log(existe_foto);
  // Aquí puedes manipular el valor de existe_foto como desees
});

0

Dado que tu función request devuelve una promesa (indicada por el modificador async), si quieres obtener el valor de dicha promesa, no tienes de otra que esperar por ella.

Hay básicamente dos maneras de esperar por ella.

La primera es usando el modificador await, por ejemplo:

existe_foto = await request();
console.log(existe_foto);

En este caso, la línea que sigue no se ejecuta hasta que se resuelve la promesa.

Debes tener en cuenta que await se puede usar solo dentro de funciones asíncronas y el cuerpo principal de un módulo. Si tu código no es parte de una función o del cuerpo principal de un módulo, no puedes usarlo. Si lo haces, obtendrás un error como este:

await is only valid in async functions and the top level bodies of modules

La segunda opción, es usando el método .then() de la promesa, que se dispara cuándo la promesa se ha resuelto, por ejemplo:

request().then(existe_foto => { console.log(existe_foto) });
console.log("listo");

En este caso, la siguiente línea se ejecuta inmediatamente, pero la función callback que está dentro de .then() no se ejecuta hasta que se resuelve la promesa.

Para que se comprenda mejor, he preparado el siguiente ejemplo, que puedes ejecutar aquí mismo en la respuesta.

Las piezas importantes son:

  • La función tardar simplemente duerme durante la cantidad de segundos indicada. Esta me sirve para simular una llamada que realmente toma tiempo, como la de obtener un recurso remoto o hacer un cálculo complejo.

  • La función esperar, retorna una promesa que al final se va a resolver con el número de segundos, que se esperan llamando a la función tardar. Esto me sirve para tener un valor de retorno que podamos utilizar al resolverse la promesa.

  • La función probar, imprime un par de mensajes en la consola, uno antes y otro después de la espera por el resultado de la función esperar, que se invoca con el ya mencionado modificador await y al que se le pasa un valor de espera aleatorio de entre 3 y 10 segundos.

    Como podrás observar, el mensaje después indica la cantidad de segundos de la espera, valor que se ha obtenido de la función esperar.

  • Finalmente, desde el cuerpo principal del script llamamos a la función probar, primero sin ningún modificador, y luego añadiendo una llamada al método then() de la promesa.

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function getTime() {
  return(new Date().toLocaleString());
}

async function tardar(segundos) {
  return new Promise((resolve) => {setTimeout(resolve, segundos * 1000)});
}

async function esperar(segundos) {
  await tardar(segundos);
  return Promise.resolve(segundos);
}

async function probar(texto) {
  console.log(texto, "antes", getTime());
  let x = await esperar(3 + getRandomInt(7));
  console.log(texto, "después de", x, "segundos", getTime());
}

console.log("primero", getTime());
probar("1-");
console.log("segundo", getTime());


console.log("tercero", getTime());
probar("2-").then(() => { console.log("2-then", getTime()) });
console.log("cuarto", getTime());

Ejecútala y revisa la secuencia de mensajes que encontrarás en la consola. Ejecútala varias veces y verás como, aleatoriamente, se resolverá a veces primero una llamada y a veces la otra y a veces ambas al mismo tiempo. Cuándo el orden de los mensajes de esta salida te resulte lógico, habrás entendido async/await y .then().

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