Using "map" with promises returns ordered and unordered results

Question

I have this piece of code:

const Axios = require('axios');
const baseURL = 'https://jsonplaceholder.typicode.com';

async function main() {
    const posts = await Axios(`${baseURL}/posts`);
    const users = await Promise.all(posts.data.map( async (post, index) => {
        let d = await Axios(`${baseURL}/users/${post.userId}`);
        return d.data.name;
    }))

    users.map( (user, index) => {
        console.log( `${index}. ${user}` );
    });
}

And outputs the result in order:

1. Patricia
2. Glenna
3. Nicholas
4. Kurtis
5. Chelsey

Everything Ok, but ... If I do:

async function main() {
    const posts = await Axios(`${baseURL}/posts`);
    await Promise.all(posts.data.map( async (post, index) => {
        let d = await Axios(`${baseURL}/users/${post.userId}`);
        console.log( `${index}. ${d.data.name}` );
    }))
}

the console.log inside map prints the list unordered ...

2. Glenna
4. Kurtis
5. Chelsey
1. Patricia
3. Nicholas

My question is:

Why in the first code map returns the list ordered, and in the second one the console.log inside map, prints the list unordered ?

Answer 1

Promise.all is designed to keep the order of the results of the promises that were passed to it, independent of the order those promises actually resolved. So when Promise.all resolves, it means all individual promises resolved, and then Promise.all resolves to the array of resolutions in the same order as the corresponding promises have in the array.

If however you output the values as soon as their promises resolve, then the above has of course no effect on your output -- it will now be ordered by the order in which the individual promises resolve.

Simple example:

Let's say there are three promises p1,p2, p3 that resolve to 1, 2 and 3. But the second promise will resolve sooner than the other two.

Promise.all is called with [p1, p2, p3]. It returns a new promise that will eventually resolve to [1, 2, 3]. During the time that not all promises are resolved, you could imagine that an internal array evolves as follows:

• p2 resolves. Promise.all internally stores [undefined, 2, undefined]
• p1 resolves. Promise.all internally stores [1, 2, undefined]
• p3 resolves. Promise.all also resolves with value [1, 2, 3]

Here you can see that the first code would output 2, 1, 3 while the second would output 1, 2, 3

Answer 2

Because if you use asynchronus code it doesnt matter in which order you "fired" the requests, it only counts how long the response take.

So your result will be ordered in the way your requests finished, so if your request for x finished first, even if you fired it last, it will be still on the first position of your result

The map function is "blocking" which means that the second request is fired after the first is finished and so on.

here an example: https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/

Answer 3

When you use Promise.all(requests), all requests are made in parallel, therefore you can't know which ends before another.

In the first code you already had the result in the order of the array of requests. But in the second one, the console.log is in the order of responses.

Answer 4

Because Promise.all executes promises in parallel and is async, while .map is blocking and executes with order and it won't finish until it iterates over all the items. It's like for-each loop.

If you want to achieve with ordering, either I suggest you to use Bluebird.each (library) or something like this:

const promiseEach = promises => {
  const results = [];

  return promises
    .reduce((acc, val, idx) => acc.then(_ => ((idx > 0 && results.push(_)), val)), Promise.resolve())
    .then(_ => [...results, _]);
}

const a1 = Promise.resolve(1);
const a2 = Promise.resolve(2);
const a3 = Promise.resolve(3);

const d1 = new Promise((resolve, reject) => { setTimeout(() => resolve(1), 3000); }); // resolves after 3 seconds.
const d2 = new Promise((resolve, reject) => { setTimeout(() => resolve(2), 2000); }); // resolves after 2 seconds.
const d3 = new Promise((resolve, reject) => { setTimeout(() => resolve(3), 1000); }); // resolves after 1 seconds.

// this will respect orderings, before first promise is not resolved, does not goes to next one.
promiseEach([a1, a2, a3, d1, d2, d3]).then(console.log);

and pass your map to promiseEach function and they will be ordered.