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

我在页面加载时触发了两个异步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;
        }
    }
}

模块控制器{
导出类MyController{
静态$inject=[“$scope”、“$http”]；
公共总电流：任何；
公共服务：任何；
公共设施：有；
建造师(
私有$scope:ng.IScope，
私有$http:ng.IHttpService，
) {
此.$scope.$watchGroup（['myC.TotalCurrent'，'myC.TotalPrevious']，函数（newVal，oldVal，scope）{
如果（newVal[0]！=oldVal[0]&&newVal[1]！=oldVal[1]&&newVal[0]！=null&&newVal[1]！=null）
scope.myC.diffPercent=scope.myC.GetDifferencePercent（newVal[0]，newVal[1]）；
});
这是.GetValuesFromAPI（）；
}
public GetValuesFromAPI（）{
this.TotalCurrent=null；
this.TotalPrevious=null；
这是.http.get（“url1”）。然后（（结果：any）=>{
如果（result.value.length>0）{
var TempCurrentTotal=0；
对于（变量i=0；i{
如果（result.value.length>0）{
var TempPreviousTotal=0；
对于（变量i=0；i

---

现在这个很好用。但是，我想知道是否有任何方法可以实现这一点，而不必担心与使用

$watchGroup

相关的性能问题，因为将来API调用的数量可能会增加，而且我的页面上有几个关于

$watch

的其他变量。我考虑过用

.then（）

链接API调用，但每个API都有很大的响应时间，链接它们也会降低页面速度。有什么建议吗？

你考虑过同时开始吗

您可以这样使用：

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服务

---

当两个承诺都完成时调用回调。如果需要，您也可以检查错误，只需附加一个catch。

您考虑过并行启动它们吗

您可以这样使用：

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服务

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