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!

Community · Accepted Answer · 2017-05-23 12:22:04Z

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, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 2, 2015 at 21:32

bransonl

5663 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bluesea Over a year ago

That is exactly what I want to do. How do I do it then? I am very new to angularjs.

bransonl Over a year ago

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.

Jan Over a year ago

That will return them from the success method but not from the service.

bransonl Over a year ago

Sorry, I overlooked that. Refer to stackoverflow.com/questions/27238928/… to return the data from your call.

Community · Accepted Answer · 2017-05-23 12:06:13Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related