javascript - 将 "map"与 Promise 结合使用会返回有序和无序结果

Question

我有这段代码:

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}` );
    });
}

并按顺序输出结果:

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

一切都好，但是......如果我这样做:

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}` );
    }))
}

console.log里面map无序打印列表...

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

我的问题是:

为什么在第一个代码 map返回有序列表，并且在第二个中返回 console.log里面map ，打印列表无序？

Answer 1

Promise.all 旨在保持传递给它的 Promise 结果的顺序，与这些 Promise 实际解决的顺序无关。因此，当 Promise.all 解析时，意味着所有单独的 Promise 都已解析，然后 Promise.all 解析为解析数组，按照与数组中相应的 Promise 相同的顺序。

但是，如果您在 promise 解决后立即输出值，那么上述内容当然不会对您的输出产生影响 - 现在将按照各个 promise 解决的顺序进行排序。

简单示例:

假设有三个 Promise p1、p2、p3 解析为 1、2 和 3。但第二个 Promise 会比其他两个更早解析。

Promise.all 使用 [p1, p2, p3] 调用。它返回一个新的 Promise，最终将解析为 [1, 2, 3]。在并非所有 promise 都得到解决的时间内，您可以想象内部数组的演变如下:

• p2 解析。 Promise.all 内部存储 [undefined, 2, undefined]
• p1 解析。 Promise.all 内部存储[1, 2, undefined]
• p3 解析。 Promise.all 也解析为值 [1, 2, 3]

在这里您可以看到第一个代码将输出 2, 1, 3，而第二个代码将输出 1, 2, 3