javascript - 如何使用异步 API 调用作为 Javascript 中的值构建对象
问题描述
再一次,异步性在踢我的屁股。问题:我有一个配置文件,我必须基于它构建一个多级对象,例如:
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 端点提供服务。例如,对于会议,我有一个 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
,我可以看到 Object 的第一级,但在下面我看到了我无法访问的 observables。此外,我有严重的怀疑forEach
循环,async/await
是要走的路,但我只想得到解决,然后想到更好/更有效的实现。
解决方案
一种方法是:
Object.keys(personnelTasks[employeeType]).map(
taskCategory => personnelTasks[employeeType][taskCategory].map(
task => axios.get(`${DEV_API}/employees/${employeeId}/time-tracking/${task}`)
)
)
你有一个二维数组,里面有未解决的承诺。您将不得不处理这个数组,promise.all
然后构建对象。
推荐阅读
- vue.js - Vue IE 未处理的承诺拒绝
- python - 有没有办法将数据框的突出显示部分保存到 excel 中?
- jenkins - 使用 Blue Ocean 时如何在 Xcode 集成插件中提供 hudson.util.Secret 格式的 keychainPwd?
- reactjs - 如何更新 graphql 条目?
- wordpress - 使用 WP-REST-API 创建包含古腾堡内容的帖子
- python - 在 python 烧瓶应用程序中使用 json 对象上传文件的 POST 方法
- windows - Powershell - 网络流量
- android - 使用 deviceID、orderID、PurchaseToken 来验证服务器上的购买是否足够?
- ios - UITableView 与 UITextView 对齐
- angular-material - 为什么材料文件夹没有显示在 ng_modules/@angular 下?