1

Estoy intentando gestionar las promesas para poder utilizar el resultado en una variable donde genero un código HTML, pero no lo consigo.

¿Alguien me echa una mano?

Dejo el código:

const entries = [1,2,3,4]

var result = getData(entries)

function getData(entries) {
  var topicsHTML = ''
  for (const entry of entries) {
    return fetch(`https://jsonplaceholder.typicode.com/todos/${entry}`)
      .then(res => res.json())
      .then(data => topicsHTML += `<p >${data.title}</p>`)
      .catch(console.error)
  };
  return topicsHTML;
};

console.log(result); // Promise {<pending>}
console.log(result.then(res => res)); // Promise {<pending>}

// Código esperado : <p>Title 1</p><p>Title 2</p>....
1
  • Hola, usar async/await es una posibilidad. el 25 abr. 2019 a las 20:01

1 respuesta 1

0

Puedes usar async/await como te comenté.

PROBLEMA

Se desea obtener una serie de datos al consumir una API, usando una serie de llamadas a la misma usando diferentes parámetros que se almacenan en una lista.

SOLUCIÓN

Para lograr lo que te propones podrías usar una función async. Debes verificar la compatibilidad del navegador si deseas implementar esta funcionalidad en tu página.

Una forma en la que podrías lograrlo es la siguiente:

const entries = [1,2,3,4];
const btn = document.getElementById('button');
btn.addEventListener('click', async (event) => {
  event.preventDefault();
  document.getElementById('resultado').innerHTML = await getData(entries);
});

async function getData(entries) {
  let topicsHTML = ''
  for (const entry of entries) {
    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${entry}`);
    const data = await res.json();
    topicsHTML += `<p >${data.title}</p>`;
   }
   return topicsHTML;
}
<button type="button" id="button">Ejecutar</button><br><br>
<label for="resultado">Resultado:</label><br><hr>
<div id="resultado" name="resultado"></div><br>

Como puedes ver en el código, usamos la función async para poder realizar la tarea de forma secuencial (sincrónica) y de esta forma podemos devolver la Promise resuelta y no en estado pending.

¿Cómo funciona?

Cuando realizamos una declaración de función tipo async, estamos diciendo que la misma realizará una tarea asíncrona o con llamadas a funciones que devuelven una Promesa. En este caso fetch es una función que devuelve una promesa. Por lo tanto, debemos esperar que dicha promesa sea resuelta (o rechazada). Esto lo hacemos usando el operador await.

Una vez que obtenemos la respuesta con fetch, usamos el método json() del objeto reponse recibido, y dado que dicho método también devuelve una Promesa, debemos usar nuevamente el operador await.

Ahora, podrás notar que la función callback que he pasado al evento del botón también es una función async, esto debe ser así ya que dentro de dicha función hago una llamada a una función async (getData()), por lo tanto debo esperar que dicha función realice su tarea antes de asignar el resultado a la variable, que en este caso es el innerHTML del elemento div creado para este ejemplo.

Puedes leer un poco más sobre funciones async en MDN.

También puedes leer más sobre la API Fetch en MDN

Espero que esto aclare tus dudas.

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.