檢查異步值與$ HTTP一個循環中調用

Question

在我的網頁我有那採取的網址輸入的形式

<div ng-repeat="parent in parents"> 
    <input ng-model="parent.url" type="text" /> 
</div> 
<button ng-click="addParent()"> Add new link </button> 

後來我有按鈕NG單擊，在調用一個函數我控制器，它檢查（異步）是否存在包含這些URL的頁面，以及其他一些（同步）檢查。

不知何故，我需要等待結果處理，收集它們，然後根據這些結果顯示一些內容。我試圖遍歷所有$ HTTP調用每個URL：

var results = []; 
for (let i = 0; i < parents.length; i++) { 
    let p = parents[i]; 
    $http.get(p.url). 
    then((res) => { // pages exists 
    results.push(true); 
    }, (err) => { // page doesn't exist 
    results.push(false); 
    }); 
} 

但這將返回一個空列表，因爲$ HTTP調用是異步的。然後，我真的不能檢查所有我的結果是這樣的：

if(sync_values){ // this is fine 
    if(async_values){ // this is never filled in 
    // do something 
    } 
} 

我如何檢查我的結果畢竟$ HTTP調用？

---

UPDATE：

我試圖實現與$q.all()一個工廠，將收集的承諾和解決這些問題。棘手的一點是解決價值而不是承諾;我需要知道哪些頁面存在以及哪些頁面丟失了。所以我設法想出爲我廠下面的代碼：

let deferred = $q.defer(); 
let promises = []; 
angular.forEach(parents, function(parent) { 
    promises.push($http.get(parent.url).then((res) => { 
    return true; 
    }, (err) => { 
    return false; 
    })); 
}); 

$q.all(promises). 
then((res) => { 
    deferred.resolve(res); 
}); 
return deferred.promise; 

現在我回到布爾值的列表（我知道哪些頁面存在，不）。

Answer 1

你應該使用$q：

angular.module('app', []) 
 
.controller('ctrl', ['$q', '$scope', '$http', function($q, $scope, $http){ 
 

 
    $scope.handler = function(){    
 
    $scope.results = []; 
 
    $scope.loaded = false; 
 
    $scope.parents = [1,2,3,4,5,6,7,8,9,10]; 
 
    var promises = []; 
 

 
    for (var parent in $scope.parents) {   
 
     let deffered = $q.defer(); \t \t 
 
     promises.push(deffered.promise); 
 
     $http.get('https://stackoverflow.com'). 
 
     then(res => { 
 
      console.log('true'); 
 
      $scope.results.push(true); 
 
      deffered.resolve(true); 
 
     }, err => {   
 
      console.log('false'); 
 
      $scope.results.push(false); 
 
      deffered.resolve(false); 
 
     }); 
 
     } 
 

 
     $q.all(promises).then(() => { 
 
     console.log('completed'); \t \t \t 
 
     $scope.loaded = true; 
 
     }); \t 
 
    } 
 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='ctrl'> 
 
    <input type='button' value='Click' ng-click='handler()'/> 
 
    <div ng-if='loaded'> 
 
    <span ng-repeat='result in results track by $index'>{{result}} </span> 
 
    </div>  
 
</div>