javascript - 有没有办法在继续之前等待 promise ？

Question

我有一些数据数组，希望每个数据都能获得一些信息。

我想在进程启动时记录控制台并在进程结束时记录数据，但结果给我的数据与初始化时的数据相同。

我尝试过使用 async/await，但它没有像我预期的那样工作。

这是我的代码

const data = [
  {
    name: 'User 1',
    detail: 0
  },
  {
    name: 'User 2',
    detail: 0
  },
  {
    name: 'User 3',
    detail: 0
  }
];

function getDetail() {
  setTimeout(() =>  {
        return "Detail Test";
   }, 3000);
}

async function mapping() {
  await Promise.all(data.map(async (item) => {
    item.detail = await getDetail();
  }))
}


console.log("Start");
mapping();
console.log(data);

结果还是一样。

[
  {
    name: 'User 1',
    detail: 0
  },
  {
    name: 'User 2',
    detail: 0
  },
  {
    name: 'User 3',
    detail: 0
  }
]

我的期待

[
  {
    name: 'User 1',
    detail: "Detail Test"
  },
  {
    name: 'User 2',
    detail: "Detail Test"
  },
  {
    name: 'User 3',
    detail: "Detail Test"
  }
]

Answer 1

您的代码有 3 个问题:

1. getDetail 应该为 await 返回实际等待的 promise 。

const getDetail = () => new Promise((resolve) => {
  setTimeout(() =>  {
        resolve("Detail Test");
   }, 3000);
}

1. Array.map 不修改原始数组，强烈推荐这样做，但为了回答您的问题:

async function mapping() {
  await Promise.all(data.map(async (item, i) => {
    data[i].detail = await getDetail();
  }))
}

1. 最后，您需要等待映射以使更改生效:

async function run() {
  console.log("Start");
  await mapping();
  console.log(data);
};

run();

这是一个有效的 pen