为什么带有 async / await 的 Array.map() 返回奇怪的结果？

Question

这是我的代码的工作版本，它按预期返回所有内容：

***.then(r => r.json()).then(async r => {

                    for (let i = 0; i < r.length; i++) {
                        let pipeline = r[i];
                        pipeline.collapsed = true;
                        pipeline.levels = await this.getPipelineLevels(pipeline.id);
                    }

                    this.project.pipelines.items = r;
                })

这是返回奇怪结果的“损坏”版本：

****.then(r => r.json()).then(r => {
                    let pipelines = r.map(async (value) => {
                        let levels = await this.getPipelineLevels(value.id);
                        return {...value, collapsed: true, levels: levels};
                    });

                    this.project.pipelines.levels = pipelines;

console.log(JSON.stringify(pipelines)) 在*.map() 之后出现在控制台中的奇怪输出：

[{"_c":[],"_s":0,"_d":false,"_h":0,"_n":false},{"_c":[],"_s":0,"_d":false,"_h":0,"_n":false}]

这里发生了什么？

Answer 1

因为Array.map 实际上并不是await，所以它传递了回调。它不在乎你将它的回调标记为async。

只需 Array.map 你的 Promise 然后将它们传递给 Promise.all 并让它等待一切（并行）为你。

const getPipelineLevels = id => new Promise(resolve => {
  setTimeout(() => resolve({ id: id, foo: 'bar' }), 500)
})

const idx = [1,2,3,4,5]

const tasks = idx.map(id => {
  return getPipelineLevels(id)
    .then(value => ({ ...value, bar: 'baz' }))
})

Promise.all(tasks)
  .then(results => {
    console.log(results)
  })

Answer 2

试试这样的：

.then(async r => {
    let pipelines = await Promise.all(r.map(async (value) => {
        let levels = await this.getPipelineLevels(value.id);
        return {...value, collapsed: true, levels: levels};
    }));
    this.project.pipelines.levels = pipelines;
});

---

Array.map(async (value) => {...}) 返回一个 Promise 数组。

这个解决方案也将比 OP 试图实现的更快，因为它是并行等待的。

注意你应该avoid awaiting a .then(…) chain。