如何在 javascript 中的 array.map() 中分配 http function 的结果

Question

我读过很多文章，但我对整个异步事情完全是新手，我很难理解这一切是如何工作的。 我想 map 过滤的对象数组，在其中，我想返回 function 的结果（数量）并将其设置为 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);
}

这是 function 进行映射并具有我想要工作的功能 // a.pmtduedate 返回正确的值，因为没有 http 调用 // a.pmtdue 返回 zoneawarepromise 但我不知道如何获得价值

 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;
      })
    );
  }

我的数据服务 function （我知道有时代码很重要，我认为这无关紧要）：

 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);
}

有人可以帮我理解我做错了什么吗？ 请随意为我降低它，因为这就是我此时的感受。

编辑以修复错误，例如缺少等待和返回。 现在可以看到数据服务中返回的值，但在 map function 部分中未定义。

Answer 1

哦哦，：！ 我知道了！ 我仍然不完全理解它为什么起作用，但我将数据服务更改如下：

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