How to use async/await syntax with forEach loop in Javascript?

Question

I've looked at several questions on using async/await with a forEach loop but nothing seems to cover my user case... How can I get the code below to work? Right now I'm getting the following error:

await is a reserved word

Here's the code:

export const fetchUserBookmarks = ( bookmarksIDs ) => async ( dispatch, getState, api ) => {

    dispatch({
        type: 'IS_FETCHING_BOOKMARKS'
    });

    try {

        bookmarks = [];

        bookmarksIDs.forEach( bookmarkID => {
            const bookmark = await api.get( selectedPostByIdEP + bookmarkID ); 
            bookmarks.push( bookmark ); 
        }); 

        dispatch({
            type: 'HAS_FETCHED_BOOKMARKS', 
            payload: bookmarks
        });

    } catch( error ) {

        dispatch({
            type: 'FAILED_FETCHING_BOOKMARKS', 
            payload: error
        });

    }

}

add async to forEach loop, bookmarksIDs.forEach(async bookmarkID => {...}) — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Apr 9, 2018 at 6:56
sure, that would work, but not as expected, for example, dispatch will be called before anything is pushed to bookmarks regardless of what you do inside forEach - see this answer — Jaromanda X
– Jaromanda X, Commented Apr 9, 2018 at 6:56

Tal Z · Accepted Answer · 2018-04-09 08:03:27Z

8

First, To use await you should declare the function as async. You have done so with the outer function but not with the inner function.

The change will look something like this:

bookmarksIDs.forEach(async bookmarkID => {

Second, what you probably want is to run those api calls in parallel.

You can replace forEach with a map call and await all the resulting promises together.

To do that your code should look something like this:

const bookmarks = await Promise.all(
  bookmarksIDs.map(bookmarkID => 
    api.get( selectedPostByIdEP + bookmarkID )
  )
);

--

It seems that if bookmarks is not declared anywhere else it causes a problem. using const or let should solve that problem.

edited Apr 9, 2018 at 8:03

answered Apr 9, 2018 at 7:02

Tal Z

3,22020 silver badges32 bronze badges

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

8 Comments

Ry- Over a year ago

How does the first step relate to the second step?

Tal Z Over a year ago

The first point is to show what's missing in your code. The second point is to show how to modify the code to run in parallel, if that is what you intended to do.

Ry- Over a year ago

But async isn’t missing. Putting it there wouldn’t work at all.

Tal Z Over a year ago

You can't use await api.get in the inner without it. But I agree, that is why I prefer the solution in the second part of my answer.

grazdev Over a year ago

@TalZ OP here. I've just tried your code (second part) but it doesn't seem to work for me. More precisely, the requests are being made and are successful (I can see that in the inspector's Network tab), but in fact any code that follows the Promise.all snippet doesn't execute. Even just a console.log prints nothing to the console...

|

Ry- · Accepted Answer · 2018-04-09 07:02:12Z

1

forEach isn’t a loop; it’s a function that you pass a function to. There’s no way to get a promise out of it. If you want to perform api.gets one by one, you can use a for loop:

for (const bookmarkID of bookmarksIDs) {
    const bookmark = await api.get(selectedPostByIdEP + bookmarkID); 
    bookmarks.push(bookmark); 
}

and if you want to do them in parallel, you can create several promises and use Promise.all to collect their results:

const bookmarks = await Promise.all(
    bookmarksIDs.map(
        bookmarkID => api.get(selectedPostByIdEP + bookmarkID)
    )
);

answered Apr 9, 2018 at 7:02

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Comments

Nitin Manocha · Accepted Answer · 2020-07-20 17:03:35Z

1

forEach loop is not compatible with promise and async functions. Use for.. of loop instead. It would work fine.

async(data)=>{
    const ids = ["xyz","abc"]
    for (const id of ids){
    let data = await Collection.findById(id)
    console.log(data)
    } 
}

answered Jul 20, 2020 at 17:03

Nitin Manocha

1506 bronze badges

Comments

Jaromanda X · Accepted Answer · 2018-04-09 07:00:43Z

0

You'll want to do something like this instead

try {

    bookmarks = await Promise.all(bookmarksIDs.map( bookmarkID => api.get( selectedPostByIdEP + bookmarkID )); 

    dispatch({
        type: 'HAS_FETCHED_BOOKMARKS', 
        payload: bookmarks
    });

}

answered Apr 9, 2018 at 7:00

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Collectives™ on Stack Overflow

How to use async/await syntax with forEach loop in Javascript?

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related