javascript - 使用 $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 = [];
    });
}

如您所见，我可以从主函数本身的 $http 调用中获取返回的数据； $scope.close = 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() 数组中的每一项都返回一个 Promise。由于没有返回任何内容，因此您的响应将为 [undefined, undefined]。

您需要做的就是将 $scope.open = response.data.data; 替换为 return response.data.data; ，它应该可以工作。确保在 catch block 中执行相同的操作。

编辑:这是代码的外观

$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 [];
    });
}