Trying to fetch multiple api in javascript with promise.all and forEach

Question

async function someFunction() {
  try {
    await Promise.all([
      trendingsSlide.forEach((val) => {
        axios(
          `https://api.themoviedb.org/3/movie/${val}?api_key=${api}`
        );
      }),
    ]).then((val) => {
      console.log(val);
    });
  } catch (err) {
    console.log(err);
  }
}
someFunction();

Why The response is undefined, I tried a lot to fix the problem but it is not working

T.J. Crowder · Accepted Answer · 2020-11-02 06:59:51Z

1

Because forEach returns undefined. You wanted map, and also to return the promise from axios from the callback (which you can do implicitly with a concise arrow function rather than one with a {} body):

async function someFunction() {
  try {
    await Promise.all(
      trendingsSlide.map((val) => 
        axios(
          `https://api.themoviedb.org/3/movie/${val}?api_key=${api}`
        )
      )
    ).then((val) => {
      console.log(val);
    });
  } catch (err) {
    console.log(err);
  }
}
someFunction();

You could make it a bit more readable (to me, anyway) by using an async function with map:

async function someFunction() {
  try {
    await Promise.all([
      trendingsSlide.map(async (val) => {
        const val = await axios(
          `https://api.themoviedb.org/3/movie/${val}?api_key=${api}`
        );
        console.log(val);
    });
  } catch (err) {
    console.log(err);
  }
}
someFunction();

edited Nov 2, 2020 at 6:59

answered Nov 1, 2020 at 16:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mohahmed123 Over a year ago

But Why He Return Fullfilled in the console?

Bergi Over a year ago

Also, no array literal around the map()

T.J. Crowder Over a year ago

@Bergi - Gah! I read right past that in the OP's code.

T.J. Crowder Over a year ago

@mohahmed123 - Because if you pass a non-promise into Promise.all, it treats it as a promise fulfilled with that value. You were effectively doing Promise.all([undefined]).then(...) which will call your fulfillment handler.

Sam · Accepted Answer · 2020-11-01 17:14:48Z

0

I don't know why you have used async/await to wait for your response as you're not doing anything after the response was returned.

Promise.all is enough in your case and no need for unnecessary code blocks

function someFunction() {
    const promises = [];
    trendingsSlide.forEach((val) => {
      promises.push(axios(
         `https://api.themoviedb.org/3/movie/${val}?api_key=${api}`
      ));
    })

    Promise.all(promises).then((val) => {
      console.log(val);
    }).catch(console.error);
}

someFunction();

Hope this might help.

answered Nov 1, 2020 at 17:14

Sam

6321 gold badge5 silver badges11 bronze badges

Collectives™ on Stack Overflow

Trying to fetch multiple api in javascript with promise.all and forEach

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related