从 ID 数组中获取数据的正确方法？

Question

目前我正在尝试使用 ID 列表来获取与 ID 一起的数据的 rest。 我的代码如下：

export const fetchAllRoomData = createAsyncThunk(
  "socket/fetchAllRoomData",
  async ({ nspData }, thunkApi) => {
    if (!nspData) {
      return;
    }
    let fetchingRoomsData = [];
    nspData.roomIDs.forEach(async (r) => {
      const response = await getChatRoomData(r);
      console.log(response) -> THE RESPONSE IS HERE AND IS CORRECT
      fetchingRoomsData.push(response);
    });
    console.log(fetchingRoomsData); ----> THIS IS AN EMPTY ARRAY
    nspData.roomsData = fetchingRoomsData;
    return nspData;
  }
);

我已经尝试了很多不同的变体，但我似乎无法将传入的响应推送到一个新数组中。 执行此操作的正确方法是什么。

Answer 1

实际上，您是将数据推入数组。 问题是你没有等待它发生。 您正在将异步 function 传递到 forEach 调用中。 forEach 通过数组进行映射并为每个元素触发异步 function，但它不会等待每个 function 完成。 因此，当您将数组记录到控制台时，尚未完成任何异步调用。

你可以做的（这只是几个可能选项的一个解决方案）是将传递给 forEach 的 function 变成一个同步的 function ，将 promise 推入数组，就像这样......

      nspData.roomIDs.forEach(r => {
const fetchData = new Promise(resolve => {
    getChatRoomData(r)
    .then(response => {
        resolve(response)
    }
fetchingRoomsData.push(fetchData);
});

然后等待数组中的承诺解决，像这样......

nspData.roomsData = await Promise.all(fetchingRoomsData)