Why are my promises not processing asynchronously?

Question

I have two functions, one function, asyncTest_returnPromise simply returns a promise, and another function, asyncTest, calls that promise 3 times by calling Promise.all(promises) on an array of promises. Within each promise in the array, I send one value ("Foo") to the console before the asyncTest_returnPromise function is called, and send another value ("Bar") to the console after it is called.

Given my understanding of the Promise.all function, I would have expected each promise within the array to be processed only after the subsequent promise had been fulfilled, meaning that as both console.log statements are within each promise in the array, the result would have been: Foo Bar Foo Bar Foo Bar

Instead, however, the output seems to be: Foo Foo Foo Bar Bar Bar

As all instances of "Foo" have been sent to the console before even the first "Bar", it seems to me these promises must be being processed concurrently.

Here are the two functions:

function asyncTest_returnPromise() {
    return new Promise((resolve, reject) => {
        resolve()
    })
}

function asyncTest() {
    var promises = []
    for (i = 0; i < 3; i++) {
        promises.push(new Promise((resolve, reject) => {
            console.log("Foo")
            asyncTest_returnPromise().then(_ => {
                console.log("Bar")
                resolve();
            })
        }))
    }
    Promise.all(promises)
}

asyncTest();

So I would like to know, have I misunderstood the purpose of Promise.all or how it works? Has some other part of my code caused all "foo" outputs before all the "bar" outputs? Is there something I need to do to have the entirety of each promise complete before moving on to the next one?

They are processed in order. The code inside each of the (outer) promises runs and outputs Foo. They are resolved later, after the microtask queue picks up the resolved inner promises and only then you get the Bars — VLAZ
Does this answer your question? JavaScript Promises: Executing Promises Sequentially — Heretic Monkey

Quentin Quentin · Accepted Answer · 2020-01-27T12:37:16

They are running asynchronously.

Each time around the loop you:

Log Foo
Create a promise (which resolves immediately)
Use then to queue up a function to run after the promise resolves

Then the loop goes around for the next iteration.

Afterwards, when the asyncTest function is finished , the event loop is free to look at the queued up functions.

Since all the promises are resolved, they each run (and log Bar).

If you want to wait for a promise before going around the loop again, then you should look at the await keyword which would let asyncTest pause (and go to sleep) until a promise resolved.

Why are my promises not processing asynchronously?

2 Answers