使用$ q.all（）從AngularJS中的函數獲取$ http數據

Question

這應該很容易，但是我似乎無法正常工作。 我有以下代碼，它們基本上是使用$http獲取數據的。

僅供參考，我正在使用POST而不是GET。

現在，它們並行運行。 一個可能比另一個更先完成。 我的目標是在所有數據完成后再顯示數據。 所以我讀了$q但似乎無法正常工作。

    $scope.getRestOpen = function () {
    $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restopen-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.open = response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.open = [];
    });
}

$scope.getRestClosed = function () {
    $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restclosed-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restclosed' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.closed = response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.closed = [];
    });
}

如您所見，我可以從main函數本身的$http調用中獲取返回的數據。 $scope.closed = response.data.data; 和$scope.open = response.data.data;

但是我還不想在它們都完成之前將它們分配給$scope 。 因此，我應該能夠使用$q執行以下操作，但是我沒有在$scope獲得數據，也沒有錯誤。

$q.all([$scope.getRestOpen, $scope.getRestClosed]).then(function(data){
    $scope.open = data[0].data; // doesn't work
    $scope.closed = data[1].data // doesn't work
});

難道我做錯了什么？

Answer 1

您需要讓$q.all()數組中的每個項目都返回一個承諾。 由於未返回任何內容，因此您的響應將是[undefined, undefined] 。

您需要做的就是替換$scope.open = response.data.data; return response.data.data; 它應該工作。 確保在catch塊中執行相同的操作。

編輯：這是代碼的外觀

$scope.getRestOpen = function () {
    return $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restopen-get.php",
        data: $.param({ 'location' : $scope.l,
                'time' : $scope.t,
                'day' : $scope.d,
                'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        return response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        return [];
    });
}

$scope.getRestClosed = function () {
    return $http({
        method: 'post',
        url: "http://www.xxx.co.uk/php/xxx/restclosed-get.php",
        data: $.param({ 'location' : $scope.l,
                'time' : $scope.t,
                'day' : $scope.d,
                'type' : 'get_restclosed' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        return response.data.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        return [];
    });
}

Answer 2

像這樣修改您的代碼

 $scope.getRestOpen = function () {
    return  $http({
       method: 'post',
       url: "http://www.xxx.co.uk/php/xxx/restopen-get.php",
       data: $.param({ 'location' : $scope.l, 
                   'time' : $scope.t,
                   'day' : $scope.d,
                   'type' : 'get_restopen' }),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    });
 }

 $scope.getRestClosed = function () {
    return $http({
      method: 'post',
      url: "http://www.xxx.co.uk/php/xxx/restclosed-get.php",
      data: $.param({ 'location' : $scope.l, 
                   'time' : $scope.t,
                   'day' : $scope.d,
                   'type' : 'get_restclosed' }),
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  });
 }

 $q.all([$scope.getRestOpen(), $scope.getRestClosed()]).then(function(data){
   $scope.open = data[0].data; 
   $scope.closed = data[1].data;
 });

Answer 3

看這個例子並閱讀代碼中的注釋：

 var myApp = angular.module('myApp', []); function MyCtrl($scope, $q, $timeout) { var thenFn = function(value) { console.log('resolved ', value); return value; }, q1 = $scope.q1 = $q.defer(), q2 = $scope.q2 = $q.defer(), p1 = $scope.q1.promise, p2 = $scope.q2.promise; //Wait complete all request $q.all([ p1.then(thenFn), p2.then(thenFn) ]) .then(function(values) { $scope.fromThen = values; }); // Must start the AngularJS digest process // to allow $q.resolve() to work properly // So use $timeOut() or $apply() setTimeout(function() { $scope.$apply(function() { console.log('resolving delayed promises'); q1.resolve({ value: 1 }); q2.resolve({ value: 2 }); }); }, 100, this); /* * Alternative approach * $timeout( function() { console.log('resolving delayed promises'); q1.resolve({value : 1}); q2.resolve({value : 2}); }); */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="MyCtrl"> {{fromThen}} </div>