javascript - 如何通过异步等待使用 map 数据

Question

我想要 .map 而不是 for 循环，但我仍然困惑如何使用它，这里是我的数据

const arr =  [
  {
    name: "John",
    subject : [
      {
        subject_id : 1,
        score :20
      }
    ]
  },
  {
    name: "Doe",
     subject : [
      {
        subject_id : 2,
        score :20
      }
    ]
  }
]

我想将主题详细信息添加到主题数组中

async getData() {
  for (let i in arr) {
    let data = arr[i];
    for (let i in data.subject) {
        const subject = data.subject[i];
        //this line code will get subject detail
        const getSubject = await this.getSubject(subject);
        subject["subjectData"] = getSubject;
    }
  }
}

一切正常，但是我如何使用map而不是for循环

输出示例

{
  name: "Doe",
   subject : [
    {
      subject_id : 2,
      score :20,
      subjectData: {
        //some detail
      }
    }
  ]
}

这就是我想做的

const newData = arr.map(async data => {
    const getSubject = data.subject;
    const subject = getSubject.map(async zp02 => {
      const getSubject = await this.getSubject(subject);
        return { getSubject };
    });
    return { ...data, subject };
});

我的主题总是返回 null 。

我想使用map的原因是因为我读到很多人说它比for循环更快

• 他们是否无论如何都使用 map 而不是 for
• 我正在学习干净的代码，你能给我一个如何在嵌套 for 循环中重构代码的想法

Answer 1

检查一下 https://dev.to/jhalvorson/how-do-i-use-async-await-with-array-map-1h3f .

摘自这篇文章:

您不能 async/await Array.map，因为同步代码不会等待异步代码解析，而是会触发函数并继续。这是我们所期望的行为，因为我们不希望 Array.map 阻塞线程，否则当 Array.map 执行其操作时什么都不会运行。知道这一点很酷，但是，如果我们需要等待 Array.map()，它并没有真正帮助我们。

幸好有一个解决方案，我们可以利用 Promise.all 来实现我们想要的

//For example, the following won't work:
const postIds = ['123', 'dn28e29', 'dn22je3'];

const posts = await postIds.map(id => {
return axios
 .get(`https://example.com/post/${id}`)
 .then(res => res.data)
 .catch(e => console.error(e));
}

console.log(posts) // [] it returns the promise, not the results 💩

//But this will:
const postIds = ['123', 'dn28e29', 'dn22je3'];

const posts = posts.map(post => {
  return axios
    .get(`https://example.com/post/${post.id}`)
    .then(res => res.data)
    .catch(e => console.error(e));
}

Promise.all(posts).then(res => console.log(`We have posts: ${res}!`));

我们不是立即返回 Array.map，而是将其分配给一个变量并将该变量传递给 Promise.all，一旦解析完成，我们就可以访问 Array.map 返回的新数组。