AngularJS：多個異步調用-如何

Question

樣品

請考慮這個Plunk 。

背景

Plunk是我需要做的經過認真簡化的示例。 基本上，我需要獲取包含驗證結果的人員記錄。 此結果還將包括類別信息，以便控制器可以分配適當的樣式以指示（或不）強制性狀態。

問題

樣本中最重要的功能就是這一功能，即self.Get將使用驗證邏輯並得出結果。

self.Get('0f8fad5b-d9cb-469f-a165-70867728950e').then(function(result){
  $scope.person = result.person;

  $scope.validationResult = result.ValidateResult;
});

如您所見（由於表單具有正確的值），$ scope.person已正確加載，但$ scope.validationResult卻未正確加載。

問題

我懷疑連續的異步調用存在時間問題，如何解決此Plunk問題，以便一切正常進行？

我想，將異步調用相互嵌套是一種“解決方案”，但是考慮到進行的調用數量，這並不能解決所有問題，並且代碼將變得高度可讀。

Answer 1

對於多個異步調用，我建議使用Promise數組：

var promises = [];
promises.push(service1.get(...))
promises.push(service2.get(...))
promises.push(service3.get(...))

return $q.all(promises);

Answer 2

那么，如何在保持所有依賴關系不變的情況下將以下代碼轉換為使用鏈接？：

self.Get = function (personId) {
    // 1. Init
    var defer = $q.defer();
    var asyncCallsResult = {};

    // 2. Get person
    var person = self.GetTestPerson();
    asyncCallsResult.person = person;

    self.LoadPersonDetailProxy(person).then(function(personDetailProxy) {
        $scope.personDetailProxy = personDetailProxy;
    });

    validationService.ValidateAsync($scope.personDetailProxy).then(function (validateResult) {
        asyncCallsResult.ValidateResult = validateResult;
    });

    defer.resolve(asyncCallsResult);

    return defer.promise;
}