Question

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

我现在所做的是使用$watchGroup来监视变量并在两个变量都不是null时调用函数。这是我的控制器代码：

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

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

两个承诺完成后都会调用回调。如果需要，您还可以检查错误，只需附加一个捕获。

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

1 个答案: