How to handle $http asynchronous issues in angularjs factory service？

Question

In the factory service js file, I created a service like this:

DashboardFactory.restService = function(method) {
var teststatus = "aaa";
switch (method) {

case "getAll":

    $http.get($_REST_API_ROOT_URL + "clients").success(function(data) {
        teststatus = data;
    }).error(function(error) {
        teststatus = 'Unable to load the client data: ' + error.message;
    });
    teststatus = "bbb";
    break;

}
return teststatus;
};

In controller, the code is like this:

$scope.AllClients=DashboardFactory.restService("getAll","","");

I also put the "AllClients" on the html page to monitor the result:

{{AllClients}}

I think the "AllClients" should show the API data from the remote server. But in reality it always give me "bbb".

What should I do？

Thanks in advance!

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

teststatus gets set as "bbb" and is returned before the API call is finished since the call is asynchronous.

Refer to AngularJS $http call in a Service, return resolved data, not promises for the different ways you can return the data from your API call.

What you want to do is return teststatus at the end of your .success()/.error() functions rather than outside. That way, it only returns once it finishes the API call and sets it to the data returned by the call.

edited May 23 '17 at 12:22

Community

1
1

answered Sep 02 '15 at 21:32

bransonl

556
3
9

That is exactly what I want to do. How do I do it then? I am very new to angularjs. – Bluesea Sep 02 '15 at 21:35
Remove the `return teststatus;` line at the end of your function. Then add `return teststatus;` after each time you assign `teststatus` a value inside your `success()` and `error()` functions. – bransonl Sep 02 '15 at 21:39
That will return them from the success method but not from the service. – Jan Sep 02 '15 at 21:40
Sorry, I overlooked that. Refer to http://stackoverflow.com/questions/27238928/angularjs-http-call-in-a-service-return-resolved-data-not-promises to return the data from your call. – bransonl Sep 02 '15 at 21:48

score 0 · Answer 2 · edited May 23 '17 at 12:06

Method 1: You don't NEED to return it at all. You could send in your model to the service RestService.getAllClients = function(myModel), set a property on the model on success myModel.AllClients = data; and then display it with {{myModel.AllClients}}. Setting the property directly on the passed in model will update the binding automagically.

Example: http://jsbin.com/muxijozofa/edit?html,js,output

Method 2: Otherwise you'd need to return the entire get call, which will return a promise, which you'll then need to resolve on the controller as per f.e How do I return data from a $http.get() inside a factory in angularjs

Refactoring tip: Instead of building a "catch-all" rest service filled with switch-case:s, you could build a general rest-service factory which you then implement for each type of call. So you get one method per type of rest call. Instead of DashboardFactory.restService, you'd then call RestService.getAllClients, which sets the data or returns a promise per the methods above.

Switch-case is just bad for feature selection, you're hiding functionality and making the code prone to hidden errors.

How to handle $http asynchronous issues in angularjs factory service？

2 Answers2