json - 服务在 Controller 之后运行？返回未定义

Question

我正在将 json 数据加载到我的应用程序中，但它总是返回未定义。 经过多次测试和更改后，我发现该服务在 Controller 之后运行，或者至少我认为它是这样的。

服务

.factory('personService', function($http) {
    return {
        getPersons: function() {
            return $http.get('/persons.php');
        }
    }
})

Controller

.controller('personsCtrl', function($scope, personService) {
   var promise = personService.getPersons();
   promise.then(
      function(response) { 
        $scope.persons = response.data;
          console.log(response.data);//first
      },
      function(response) {
          console.log('failed loading');
      });

    console.log($scope.persons); //last
})

控制台在//first 之前打印//last，这意味着它可能在从 json 文件获取数据之前运行。

控制台

undefined
[object object object]

有人知道我在这里做错了什么吗？谢谢。

Answer 1

您的代码非常好，无需更改。

我不会听从 Vamsi 的建议 - 对不起，伙计 - 因为在 Controller 中解决 promise 总是比立即解决它更好。

这样做的原因是在某些时候您可能希望将其 (getPersons) 与其他服务的其他 promise 链接起来:

personService.getPersons()
    .then(function(result){
        return service2.doSomething(result);
    })
    .then(function(result){
        return service3.doSomeOtherThing(result);
    })
    .then(function(result){
        return service4.doLastThing(result);
    })
    .catch(function (reason) {
        console.log(reason);
    })
    .finally(function(){
        // always executed.
    }); 

如果您查看这段代码，您可以看到一个典型的 Promise 链，其中每个服务都使用前一个 Promise 的结果并将其返回到链的下一个分支。

如果发生错误，您将能够捕获错误并继续。

回到你的问题:

.controller('personsCtrl', function($scope, personService) {
   var promise = personService.getPersons();
   promise.then(
      function(response) { 
        $scope.persons = response.data;
          console.log(response.data);//first
      },
      function(response) {
          console.log('failed loading');
      });

    console.log($scope.persons); //last
});

promise 可能会延迟，尤其是在处理 $http 请求时。

console.log($scope.persons); //last

将立即被调用，因为代码是从上到下执行的，并且 promise - 再次 - 可能会有一些延迟。

在实际情况下，您将在 Controller 中定义一个空数组:

.controller('personsCtrl', function($scope, personService) {
     $scope.persons = [];
});

调用服务并等待服务返回数据:

.controller('personsCtrl', function($scope, personService) {
     $scope.persons = [];
     personService.getPersons()
          .then(function(result){
               $scope.persons = result.data;
          });
});

并填充将绑定(bind)到 UI 的 $scope.persons 并更新界面。

如果您在填充 $scope.persons 之前需要做一些其他事情，您可以与另一个 Promise 链接。

如果你想更深入地了解 Promise，我建议你阅读这篇文章 article这是我找到的最好的解释。

如果您有兴趣遵循一些关于 Controller 、 promise 和构建服务的方式的非常好的指导John Papa Style Guide .