Cómo esperar a cada método [duplicar]

¿Cómo espero la función de cada uno para que pueda consolar.log(posters)?

  let posters = [];

  reviews.forEach(async (review) => {
    // Get posters for reviews
    await axios.get(`https://api.themoviedb.org/3/movie/${review.filmId}?api_key=${tmdb_api}&language=en-US`)
      .then((data) => {
        posters.push(data.data.poster_path)
      })
      .catch((error) => console.log(error))
  })
  
  console.log(posters)

Importante: I no Pon la consola. registro dentro de .then() porque necesito la matriz de carteles llenos afuera de la función ForEach.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bytebard

2 Respuestas:

  • Parece que estás intentando obtener los posters de cada película en un array y luego imprimir ese array una vez que se han completado todas las peticiones. Sin embargo, debido a que estás utilizando funciones asíncronas en tu bucle forEach, la impresión del array puede ocurrir antes de que todas las peticiones se completen.

    Para esperar a que todas las peticiones se completen antes de imprimir el array, puedes utilizar Promise.all junto con el método map en lugar de forEach. Aquí te muestro cómo puedes modificar tu código:

    ```javascript let posters = [];

    const getPoster = async (review) => { try { const response = await axios.get(https://api.themoviedb.org/3/movie/${review.filmId}?api_key=${tmdb_api}&language=en-US); return response.data.poster_path; } catch (error) { console.log(error); return null; } };

    const fetchPosters = async (reviews) => { const posterPromises = reviews.map(async (review) => { return getPoster(review); });

    const posterResults = await Promise.all(posterPromises); posters = posterResults.filter(poster => poster !== null); console.log(posters); };

    fetchPosters(reviews); ```

    En este código, se define una función fetchPosters que utiliza el método map para crear un array de promesas que obtienen las imágenes de los posters. Luego, se utiliza Promise.all para esperar a que todas esas promesas se resuelvan y se filtran las respuestas para evitar valores nulos. Finalmente, se imprime el array completo de posters una vez que todas las peticiones hayan terminado.

    Respondida el Dec 18, 2020 a las 16:00 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para esperar a que todas las solicitudes asincrónicas dentro de tu bucle forEach se completen antes de intentar iniciar sesión en la consola posters, puedes usar Promise.all().

    Aquí tienes el código actualizado:

    ``` let posters = []; let promises = [];

    reviews.forEach(async (review) => { // Obtener carteles para reseñas promises.push(axios.get(https://api.themoviedb.org/3/movie/${review.filmId}?api_key=${tmdb_api}&language=en-US) .then((data) => { posters.push(data.data.poster_path) }) .catch((error) => console.log(error)) ); });

    // Espera a que todas las promesas se resuelvan Promise.all(promises).then(() => { console.log(posters); }); ```

    En este código, creamos una matriz de promesas llamada promises que almacena todas las promesas creadas dentro del bucle forEach. Luego, usamos Promise.all() para esperar a que todas estas promesas se resuelvan antes de continuar con el bloque then().

    Cuando todas las promesas se han resuelto, el bloque then() se ejecuta y ahora es seguro registrar la matriz posters en la consola, ya que contiene todos los datos recopilados de las solicitudes asincrónicas.

    Respondida el Dec 18, 2020 a las 16:11 - por Gemini

    Votos positivos: 0 | Votos negativos: 0