javascript - 在执行操作之前等待 2 个异步 API 调用的结果

Question

我在页面加载时触发了 2 个异步 API 调用。我将每个返回的值相加，然后计算它们的变化百分比。因此，我需要确保每个 API 都已成功调用，并且在计算差异之前已填充了保存总数的两个变量。

我现在所做的是使用 $watchGroup 来监视这两个变量，并在两个变量都不为 null 时调用该函数。这是我的 Controller 代码:

module Controllers {
    export class MyController {
        static $inject = ["$scope",'$http'];
        public TotalCurrent: any;
        public TotalPrevious: any;
        public diffPercent:any;
        constructor(
            private $scope: ng.IScope,
            private $http: ng.IHttpService,
        ) {
            this.$scope.$watchGroup(['myC.TotalCurrent', 'myC.TotalPrevious'], function (newVal, oldVal, scope) {
                if (newVal[0] != oldVal[0] && newVal[1] != oldVal[1] && newVal[0] != null && newVal[1] != null)
                    scope.myC.diffPercent = scope.myC.GetDifferencePercent(newVal[0], newVal[1]);
            });
                this.GetValuesFromAPI();
        }


        public GetValuesFromAPI() {
            this.TotalCurrent = null;
            this.TotalPrevious= null;


            this.$http.get("url1").then((result: any) => {
                if (result.value.length > 0) {
                    var TempCurrentTotal = 0;
                    for (var i = 0; i < result.value.length; i++) {
                        TempCurrentTotal += result.value[i].Val;
                    }
                    this.TotalCurrent = TempCurrentTotal;
                }

            });

            this.$http.get("url2").then((result: any) => {
                    if (result.value.length > 0) {
                        var TempPreviousTotal = 0;
                        for (var i = 0; i < result.value.length; i++) {
                            TempPreviousTotal += result.value[i].Val;
                        }
                        this.TotalPrevious= TempPreviousTotal;
                    }
                })
        }

        public GetDifferencePercent(current:any, last:any){
            var percentage = ((Math.abs(current - last) / last) * 100).toFixed(2);
            return percentage;
        }
    }
}

目前效果很好。但是，我想知道是否有任何方法可以实现此目的，而不必担心与使用 $watchGroup 相关的性能问题，因为将来 API 调用的数量可能会增加，并且我的页面已$watch 上的其他几个变量。我考虑过使用 .then() 链接 API 调用，但每个 API 的响应时间都非常长，链接它们也会减慢页面速度。有什么建议吗？

Answer 1

您是否考虑过并行启动它们？

您可以使用$q像这样:

const promise1 = this.$http.get("url1");
const promise2 = this.$http.get("url2");

this.$q.all([promise1, promise2]).then(results => {
  // results[0] is the result of the first promise, results[1] of the second.
});

您可以在类构造函数中注入(inject) $q 服务。

当两个 Promise 完成时调用回调。如果需要，您还可以检查错误，只需附加一个 catch 即可。