角等待不等待答案

【问题标题】：Angular await not waiting角等待不等待
【发布时间】：2020-05-09 22:34:24
【问题描述】：

我有一些代码，await-s 设置如下：

async calculateDeletionResidualsData(res) {
    //console.log("resss is:");
    //console.log(res);

    let selectedCountries = this.countriesList.filter(c => c.selected);
    let selectedIndicators = this.indicatorsList.filter(i => i.selected);

    await selectedCountries.forEach(async c => {
        // taking each (selected) country

        await selectedIndicators.forEach(async i => {
            // taking each (selected) indicator

            // Form the series for the calculation of residuals
            let series = [];
            deletionResidualsRelevantYears.forEach(y => {
                series.push(res[c.label][y][i.label][0]);
            });
            // Calculate deletion residuals
            let drr = await util.calculateDeletionResidualsStatistics(
                deletionResidualsRelevantYears.length,
                series,
                this.deletionResidualsService
            );

            this.drr[c.label][i.label] = drr;
        });
    });

    console.log("setting qrReady to true");
    this.qrReady = true;
}

我可以清楚地看到对util.calculateDeletionResidualsStatistics 的调用仍在我浏览器的网络选项卡中进行，但我也看到console.log("setting qrReady to true"); 已经被触发，不应该被触发。为什么所有这些等待都被跳过并跳到最后一行代码？

【问题讨论】：

标签： angular promise async-await

【解决方案1】：

如果您有一组承诺，则需要使用Promise.all() 和await，并使用map() 操作来创建一组承诺。

    await Promise.all(selectedCountries.map(async c => {
        await Promise.all(selectedIndicators.map(async i => {
            let drr = await util.calculateDeletionResidualsStatistics(...);
            // ...
        });
    });

    console.log('printed after everything is finished');

请记住，Promise.all() 将在所有内部承诺都已解决后解决一系列结果。这些承诺的顺序是不可预测的，因为它们是并行解决的。

您最终会得到嵌套的Promise.all()，它将在顶级Promise.all() 解析之前批量解析。

由于您似乎正在丢弃外部承诺的结果，所以我认为这里的订单没有真正的问题。你只想在一切完成后运行一些代码。

【讨论】：

【解决方案2】：

await 仅适用于返回 Promise 的函数。 forEach 没有。假设 util.calculateDeletionResidualsStatistics 返回Promise，请改为这样编写代码：

calculateDeletionResidualsData(res) {
    //console.log("resss is:");
    //console.log(res);

    let selectedCountries = this.countriesList.filter(c => c.selected);
    let selectedIndicators = this.indicatorsList.filter(i => i.selected);

    selectedCountries.forEach( c => {
        // taking each (selected) country

        selectedIndicators.forEach(async i => {
            // taking each (selected) indicator

            // Form the series for the calculation of residuals
            let series = [];
            deletionResidualsRelevantYears.forEach(y => {
                series.push(res[c.label][y][i.label][0]);
            });
            // Calculate deletion residuals
            let drr = await util.calculateDeletionResidualsStatistics(
                deletionResidualsRelevantYears.length,
                series,
                this.deletionResidualsService
            );
            this.drr[c.label][i.label] = drr;
        });
    });

    console.log("setting qrReady to true");
    this.qrReady = true;
}

如果没有，请编辑您的帖子，我会尝试提供不同的解决方案。

【讨论】：

【解决方案3】：

await 不适用于使用回调的循环。永远不要将 await 与 forEach 一起使用。改用 for 循环（或任何没有回调的循环）

forEach 不支持承诺。它不支持异步和等待。你不能在 forEach 中使用 await。

Learn more...

【讨论】：

我使用了 for(let i = 0; i
async/await 不适用于使用回调的循环。