javascript - How to return object from angularJS service AFTER http request is complete? - Stack Overflow

admin管理员组

文章数量:1419198

I'm implementing a small service for my angularJS app that makes an http request to my server for a couple of text posts. Here's my current implementation:

app.factory("postFetcher", ['$http', function($http){
  var posts; 

  $http.get('')
    .then(function(response){
      posts = response.data.items;
    });

  return {
    getList: function(){
      return posts; 
    }
  }
}]);

The problem with this is that the http request is not plete by the time that the posts array is returned. My intuition tells me to place the return function within the http .then function so that it is only returned once the request is plete, however this isn't allowed.

Is there a way I can delay the return of posts until the http request is plete?

I'm implementing a small service for my angularJS app that makes an http request to my server for a couple of text posts. Here's my current implementation:

app.factory("postFetcher", ['$http', function($http){
  var posts; 

  $http.get('https://cdn.contentful./spaces/k2mwszledbge/entries?access_token=afa8ba8572bb0232644d94c80cfd4ae01314cd0589b98551147aab50f7134e30')
    .then(function(response){
      posts = response.data.items;
    });

  return {
    getList: function(){
      return posts; 
    }
  }
}]);

The problem with this is that the http request is not plete by the time that the posts array is returned. My intuition tells me to place the return function within the http .then function so that it is only returned once the request is plete, however this isn't allowed.

Is there a way I can delay the return of posts until the http request is plete?

• javascript
• angularjs

Share Improve this question Follow asked Sep 7, 2015 at 0:56 Sam D20Sam D20 2,58355 gold badges2626 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use promise it's one way that I see:
Factory:

app.factory("postFetcher", ['$http', '$q', function($http, $q){
    var posts; 

    return {
        getList: getListFn
    };

    function getListFn(){
        var defer=$q.defer();

        $http.get('https://cdn.contentful./spaces/k2mwszledbge/entries?access_token=afa8ba8572bb0232644d94c80cfd4ae01314cd0589b98551147aab50f7134e30')
        .then(function(response){
            if(response && response.data && response.data.items){
                posts = response.data.items;
                defer.resolve(posts);
            }
        });

        return defer.promise;
    };        
}]);

Use in controllers:

postFetcher.getList().then(function(data){
//data processing;
});

You return a promise to the caller. That way, the caller can "listen" to the promise. In order to return just posts, you have to append a then which returns response.data.items. The then that gets chained afterwards resolves that value.

getList: function(){
  return $http.get(...).then(function(response){
    // resolve just `response.data.items` to the next attached then which
    // would be from the caller of getList
    return response.data.items;
  });
}

That way, the caller can also attach a then from the promise:

postFetcher.getList().then(function(posts){
  // use `posts` (which is response.data.items)
});

---

In order to just call it once, you could store the promise in a variable. Then have getList return that promise. Attaching then to already resolved promises should resolve immediately to the resolved value.

var posts =  $http.get(...).then(function(response){
  return response.data.items;
});

return {
  getList: function(){
    return posts;
  }
}

// Call getList() the same way as above

本文标签： javascriptHow to return object from angularJS service AFTER http request is completeStack Overflow