javascript - 如何使用异步 API 调用作为 Javascript 中的值构建对象

Question

这个问题已经有答案了:

Using async/await with a forEach loop (33 个回答)

已关闭 4 年前。

异步性再次困扰着我。问题:我有一个配置文件，我必须基于该文件构建多级对象，例如:

export const personnelTasks = {
  manager: {
    administrative: ['meetings', 'evaluation', 'time-reporting', 'vacation-approval'],
    operational: ['budgeting', 'supervising', 'customer-complaints']
  },
  frontDesk: {
    administrative: ['time-tracking', 'file-reports', 'cash-reporting', 'take_on', 'dribble'],
    operational: ['answer-calls', 'face-to-face-meetings', 'cash-counting', 'process-requests']
  }
};

因此，根据员工是经理还是前台员工，我将获得一份包含 2 个选项卡的报告，administrative和operational以及他们必须执行的各种任务。对于其中每一个，后端都会返回一系列数据，但从不同的 API 端点提供服务。例如，对于 session ，我有一个 API 端点 {DEV_API}/meetings等等

我想要做的是一次调用所有 API 端点，并为每种类型的员工构建一个对象，如下所示:

const timeTrackingData = {
  administrative: {
    meetings: {...}
    evaluation: {...}
    .....
  },
  operational: {
    budgeting: {...},
    supervising: {...}
    .....
  }
}

我的解决方案是使用配置对象并基于它构建新对象，并且对于每个键，通过 async/await 调用来调用 API。

getTimeTrackingData (employeeID, employeeType) {
    const timeTrackingDataObject = {};
    Object.keys(personnelTasks[employeeType]).forEach((taskCategory) => {
      timeTrackingDataObject[taskCategory] = {};
      personnelTasks[employeeType][taskCategory].forEach(async (task) => {
        timeTrackingDataObject[taskCategory][task] = {};
        timeTrackingDataObject[taskCategory][task] = await axios.get(`${DEV_API}/employees/${employeeId}/time-tracking/${task}`);
      });
    });

    return timeTrackingDataObject;
  },

所以当我访问timeTrackingObject时，我可以看到对象的第一层，但在下面我看到我无法访问的可观察对象。另外，我有严重的疑问forEach循环和async/await这是要走的路，但我只想现在就解决，然后考虑更好/更有效的实现。

Answer 1

一种方法是:

Object.keys(personnelTasks[employeeType]).map(
    taskCategory => personnelTasks[employeeType][taskCategory].map(
        task => axios.get(`${DEV_API}/employees/${employeeId}/time-tracking/${task}`)
    )
)

你有一个二维数组，里面有 Unresolved promise 。您必须使用 promise.all 处理该数组，然后构建对象。