角度承諾和$ http

Question

ng.module('app')
    .service('CardService', ['$http', CardService])

function CardService($http) {
    this.$http = $http;
    var self = this;

  $http.get('http://localhost:3000/db').success(function(data) {
      self.items = data;
      console.log(self.items);
  });
  console.log(self.items);
}

CardService.prototype.list = function() {
        console.log(self.items);
        return this.items;
};

和結果

service.js：14未定義

service.js：18未定義

service.js：18未定義

service.js：12 [Object，Object，Object]

我該如何解決這個問題？

Answer 1

Ajax調用是異步的。 等待.get響應時，它將允許線程繼續運行。

您正在執行的console.logs將按此順序調用。

1. 在ajax調用下方的console.log
2. 列表原型內的console.log

（在ajax成功內）

3. 列表原型內的console.log
4. console.log下面self.items = data

不是成角度的方式，而是...僅當在ajax調用中初始化列表時，才應使用原型。

Answer 2

根據最佳實踐，您應該執行所有與http請求相關的工作，以使用工廠或服務獲取數據。 由於它是異步流，因此應使用$ q來處理它。 因此，您的功能將按照以下說明進行。 如果我誤解了你的問題，請糾正我。

app.factory('CardService',function($http,$q) {
var obj = {};

    obj.getCardServiceData = function(){
        var defer = $q.defer();
        $http.get('http://localhost:3000/db').then(function(response) {
         defer.resolve(response.data);
       },function(error){
          defer.reject(error);
       });
       return defer.promise;
    }

    return obj;

});

app.controller('YOUR CONTROLLER',function($scope,CardService){
      CardService.getCardServiceData().then(function(response){
           $scope.self = response.data;
           console.log($scope.self);
       },function(error){
           alert("There seems to be some error!");
           console.error(error);

       });
});