等待$ http.get完成服务调用时

Question

我面临一个问题，即控制器调用服务函数getMyList，但myLists尚未填充，因为$ http调用需要一些时间才能完成。

如何解决此问题？

这里是我的代码片段：

服务

app.factory('myService', function($http) { 
    var myList = []; 

    $http.get("http://myService/json.data").then(function (resp) { 
     myLists = resp.data; 
    }); 

    return { 
     getMyList: function (name) { 
      for (var i = 0; i < myLists.length; i++) { 
       if (myList[i].name == name) { 
        return myLists[i]; 
       } 
      } 
     } 
    } 
} 

控制器：

app.controller('MainCtrl', function(myService,$scope) { 
    var testName = "test" 
    myService.getMyList(testName).then(function(resp) { 
     // do something with resp data 
    }); 
}); 

Answer 1

首先需要解决的错别字，并选择更好的命名。然后，你需要返回元素的一个承诺，而不是一个元素（这是控制器期望什么，顺便说一句）：

app.factory('myService', function($http) { 
    // this defines a promise which, when resolved, contains an array of elements 
    var listPromise = $http.get("http://myService/json.data").then(function(resp) { 
     return resp.data; 
    }); 

    return { 
     // this returns a promise which, when resolved, contains the element with the given name 
     getElementFromList: function(name) { 
      return listPromise.then(function(list) { 
       return list.filter(function(element) { 
        return element.name === name; 
       })[0]; 
      }); 
     } 
    }; 
}); 

Answer 2

每一个HTTP调用返回角一个promise，所以在您的服务仅返回HTTP调用并返回promise。

然后在你的控制器，你可以使用then和error回调处理来自service或api调用的响应。

厂：

app.factory('myService', function($http) { 
    var myList = []; 
    return { 
     getMyList: function (name) { 
      $http.get("http://myService/json.data") 
     } 
    } 
} 

控制器：

app.controller('MainCtrl', function(myService,$scope) { 
    var testName = "test" 
    myService.getMyList() 
    .then(function successCallback(resp) // Success call back 
    { 
      if(resp.data) 
      { 
      myLists = resp.data; 
      for (var i = 0; i < myLists.length; i++) { 
       if (myList[i].name == testName) { // you can use your testName here itself. 
        return myLists[i]; 
       } 
      } 

      } 
    }, 
    function errorCallback(resp) // Error call back 
    { 
     console.log(resp) 
    }); 
}); 

Answer 3

如果您使用的是一些客户端侧路由器实现：看看Route.Resolve两个Ui.Router和ngRoute实施。

如果您没有任何路由器，那么您可以做一些小技巧...只需从您的工厂返回一个对象引用，并在出现分辨率时使用期望值填充该对象：

angular 
 
    .module('test', []) 
 
    .constant('API', 'https://jsonplaceholder.typicode.com') 
 
    .factory("PostResolved", function($http, API) { 
 
    var result = []; 
 
    $http 
 
     .get(API + '/posts/1') 
 
     .then(function(response) { 
 
     result.push(response.data); 
 
     }) 
 
    ; 
 
    
 
    return result; 
 
    }) 
 

 
    .controller('TestCtrl', function($scope, PostResolved) { 
 
    $scope.posts = PostResolved; 
 
    }) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<section ng-app="test"> 
 
<article ng-controller="TestCtrl"> 
 
    <div ng-repeat="post in posts"> 
 
    <h1 ng-bind="post.title"></h1> 
 
    </div> 
 
</article> 
 
</section>

Answer 4

为什么不使用类似如下：

app.factory('myService', function($http) { 
 
    return { 
 
     getMyList: function (name) { 
 
      var myList = []; 
 
      $http.get("http://myService/json.data").then(function (resp) { 
 
       myLists = resp.data; 
 
      }); 
 
      
 
      scope.$evalAsync(function() { 
 
       for (var i = 0; i < myLists.length; i++) { 
 
        if (myList[i].name == name) { 
 
         return myLists[i]; 
 
        } 
 
       } 
 
      }); 
 
     } 
 
    } 
 
}

Answer 5

我设法解决这个通过使用$超时。任何有更好建议的人都会让我知道。我不能让范围。$ evalAsync工作

服务

app.factory('myService', function($http, $timeout) { 
    var lists = []; 

    $http.get("http://myService/json.data").then(function (resp) { 
     lists = resp.data; 
    }); 

    return { 
     getMyList: function (name) { 
      return $timeout(function() { 
       for (var i = 0; i < lists.length; i++) { 
        if (lists[i].name == name) { 
         return lists[i]; 
        } 
       } 
     }, 2000) 

    } 
} 

控制器

app.controller('MainCtrl', function(myService,$scope) { 
    var testName = "test" 
    myService.getMyList(testName).then(function(resp) { 
     // do something with resp data 
    }); 
});