ASYNC forEach function in JS not occuring in expected order

Question

I seem to be really confused as to how async and await is supposed to work here. I am trying to get this forEach function to occur before the console.log and res.json. Unfortunately, even when attaching async and await, it is the last thing to occur.

// Setting tags
const tags = ["1", "2", "3"];

app.get("/api/posts", async (req, res) => {    
    try {
        tags.forEach(async function (tag) {
            const response = await fetch(api_url + "?tags=" + tag);
            const response_1 = await response.json();
            console.log(tag);
            await api_json.push(response_1);
        });
    }
    catch (error){
        console.log(error);
    }
    console.log(api_json);
    res.json(api_json);
});

And the output:

[]
1
2
3

I am not sure how else to change the order of which these functions can occur. Any help would be appreciated. Thanks.

await makes it look like synchronous code, but the callback you pass to forEach is still asynchronous. Your forEach is not, so it launches them immediatly, one after the other, not caring about the previous ones fullfilling or not. You may want to replace it with a regular for loop and use await directly inside of it — blex
– blex, Commented Jul 2, 2020 at 19:35

Unmitigated · Accepted Answer · 2020-07-02 19:35:28Z

5

Use for ... of instead of forEach, which is not asynchronous, so you can await each request sequentially.

for(const tag of tags){
    const response = await fetch(api_url + "?tags=" + tag);
    const response_1 = await response.json();
    console.log(tag);
    await api_json.push(response_1);
}

answered Jul 2, 2020 at 19:35

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

1 Comment

Unmitigated Over a year ago

@Zernst Glad to help.

xMayank · Accepted Answer · 2020-07-02 19:38:38Z

2

First, see how forEach works.

Array.prototype.forEach = function (callback) {
  // this represents our array
  for (let index = 0; index < this.length; index++) {
    // We call the callback for each entry
    callback(this[index], index, this);
  }
};

As you can see, callback is called but we are not waiting for it to be done before going to the next entry of the array.

That is why this occurs.

answered Jul 2, 2020 at 19:38

xMayank

1,9852 gold badges8 silver badges20 bronze badges

Collectives™ on Stack Overflow

ASYNC forEach function in JS not occuring in expected order

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related