Question

我有两个函数可以在AngularJS中为我的页面提供数据。因为它们提供数据，所以我执行它们，如下面的ng-init = "function1(); function2();"

这一切都很好没问题。但由于这些功能没有同时完成，我的部分网站已加载而另一部分未加载。

我想按顺序执行它们，一旦函数1返回成功或错误执行函数2.两个函数都使用$http简单地获取数据并返回一个JSON，我将其添加到空$scope。

以下功能;

$scope.getRestOpen = function () {
    $http({
        method: 'post',
        url: "http://www.example.co.uk/php/x/open-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restopen' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).
    success (function(data, status, headers, config){
        if(data.success && !angular.isUndefined(data.data) ){
            $scope.open = data.data;
        } else {
            $scope.open = [];
        }
    }).
    error(function(data, status, headers, config) {
        //$scope.messageFailure(data.message);
    });
}

$scope.getRestClosed = function () {
    $http({
        method: 'post',
        url: "http://www.ecample.co.uk/php/x/closed-get.php",
        data: $.param({ 'location' : $scope.l, 
                       'time' : $scope.t,
                       'day' : $scope.d,
                       'type' : 'get_restclosed' }),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).
    success (function(data, status, headers, config){
        if(data.success && !angular.isUndefined(data.data) ){
            $scope.closed = data.data;
        } else {
            $scope.closed = [];
        }
    }).
    error(function(data, status, headers, config) {
        //$scope.messageFailure(data.message);
    });
}

干杯！

Answer 1

我修改了你的代码，我认为它可以正常工作或进行少量修改。

还有一件事，根据角度文档，success已被弃用，您应该使用标准then功能。

$scope.getRestData = function () {
  var open;
    $http({
        method: 'post',
        url: "http://www.example.co.uk/php/x/open-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(data, status, headers, config){
        if(data.success && !angular.isUndefined(data.data) ){
            open = data.data;
        } else {
            open = [];
        }
      return $http({
        method: 'post',
        url: "http://www.ecample.co.uk/php/x/closed-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(data, status, headers, config){
        if(data.success && !angular.isUndefined(data.data) ){
            $scope.closed = data.data;
        } else {
            $scope.closed = [];
        }
        $scope.open = open;
    })
};

function errorCallback（）{

}

Answer 2

解决它的最优雅的方法是使用角度的$ q服务，这是一个帮助您异步运行函数的服务。

$q.all([$http.get('http://...'), 
        $http.get('http://...'),
        $http.get('http://...')])
.then(function(values) {
        console.log(values[0].data); 
        console.log(values[1].data,
        console.log(values[2].data); 
});

https://docs.angularjs.org/api/ng/service/ $ Q

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

在AngularJS中一个接一个地执行2个函数

2 个答案: