javascript - 如何在javascript中的array.map()中分配http函数的结果
问题描述
我读过很多文章,但我对整个异步事情完全是新手,我很难理解这一切是如何工作的。我想映射过滤后的对象数组,在其中,我想返回一个函数的结果(一个数量)并将其设置为 pmtdue 的值。我尝试了很多方法,但是当它被记录时,总是得到 zoneawarepromise 或 observable 或大量错误。这可能是我得到的最接近的,但它仍然不正确。
async today(day = null, status = null) {
this.logger.log(`show today's ${status} appts ${day}`);
// filter master list for today
const filtered = [...this.apptList].filter(appt => {
if (!status) {
return (
appt.scheduled >= this.helperService.dayStart(day) &&
appt.scheduled <= this.helperService.dayEnd(day) &&
appt.status.status !== 'Checked Out' &&
appt.status.status !== 'Scheduled'
);
} else {
return (
appt.scheduled >= this.helperService.dayStart(day) &&
appt.scheduled <= this.helperService.dayEnd(day) &&
appt.status.status === status
);
}
});
// calculate due amount and map it to pmtdue field
const dueappts = await this.getTotalDue(filtered).then(
res => {
// console.log(res);
this.ApptModels = res;
},
err => {
console.log(err);
}
);
// send the data to ng2-smart-table
console.log(`filtered ApptModels`, this.ApptModels);
}
这是执行映射并具有我想要工作的函数的函数 // a.pmtduedate 返回正确的值,因为没有 http 调用 // a.pmtdue 返回 zoneawarepromise 但我不知道如何获取 VALUE
getTotalDue(appts: Array<any>): Promise<any> {
return Promise.all(
appts.map(async (a: any) => {
a.pmtduedate = await this.helperService.getDueDate(a);
a.pmtdue = await this.dataService.sendTotalDue(a);
console.log(a.pmtdue); // logs undefined
return a;
})
);
}
我的数据服务功能(我知道有时我认为无关紧要的代码很重要):
async sendTotalDue(appt) {
this.logger.log(`fetch amount ${appt.patientID.nickname} owes`);
return await this.http.post(`${SERVER_URL}/sendtotaldue`, appt);
}
最后,后端功能(减去数据细节)。它在后端记录正确的数量,我只是无法让它显示在前端:
module.exports.sendTotalDue = (req, res) => {
const appt = req.body;
// callback function that handles returning data
function done(err, results) {
const totaldue = parseInt(results, 10);
console.log(`API sendTotalDue CALLBACK done...totaldue: ${totaldue}`);
if (err) {
console.log('ERROR getting total due: callback error', err);
res.sendStatus(500).json(err); // server error; it'd be good to be more specific if possible
} else {
// end the request, send totaldue to frontend
console.log(`SUCCESS send totaldue to frontend ${totaldue}`);
res.status(200).json(totaldue);
}
}
// run first function
console.log(`1. getAmtDue:`);
this.getAmtDue(appt, done);
};
module.exports.getAmtDue(appt, callback) {
... function finds past visits, past payment and due totals
}
module.exports.getCurrentDue(appt, pastdueamt, callback) {
... function finds current visits and payments. calculates current due and adds the past due
callback(null, totaldue);
}
有人可以帮我理解我做错了什么吗?请随意为我降低它,因为这就是我此时的感受。
解决方案
哦哦!!!我知道了!我仍然不完全理解它为什么起作用,但我将数据服务更改如下:
async sendTotalDue(appt): Promise<any> {
this.logger.log(`fetch amount ${appt.patientID.nickname} owes`);
try {
const result = await this.http
.post(`${SERVER_URL}/sendtotaldue`, appt)
.toPromise();
return result as any[];
} catch (error) {
console.log(error);
}
}
将我的服务更改为上述内容最终使我的值准确地出现在数据表中我想要的位置!:)
我找到了这篇文章,它有助于弄清楚如何使用 Observable Angular Tutorial with Async and Await
推荐阅读
- android - 将 Canvas 位图与绘画一起保存到存储中。建议?
- python - matplotlib gridspec 中的 librosa 绘图
- php - 有没有办法告诉哪些测试执行(覆盖)特定的类/方法?
- python - TypeError:不可散列的类型:'set'
- java - 实现一个接口,该接口的方法返回一个接口但得到一个未实现的错误
- java - 图像中的绿色通道不正确
- c++ - 字符串后显示的随机字符 - C++
- c++ - 编写 LookAt 函数
- asp.net-mvc - Angular Material 由于某种原因没有样式
- scala - 如何从RDD spark中的字符串数组中检索特定值