Async call back fires after method return (angularjs .then())

Question

I have the following code: (I've tried many ways)

performLogin = (data: LoginRequest) => {
  var deferred = this.qService.defer();
  var response = this.httpService.get(
  myServiceURL + '&' + ObjecttoParams(data))
  .then(function (response) {
    debugger;
    this.loginResponse = JSON.parse(JSON.stringify(response.data));
  });
  debugger;
  deferred.resolve(response);
  debugger;
  return(this.loginResponse);
}

This is my constructor for this service:

  constructor($http: ng.IHttpService, $location: ng.ILocationService, $q: ng.IQService) {
            this.qService = $q;
            this.httpService = $http;
            this.locationService = $location;
            this.loginResponse = new LoginResponse();
            this.serviceURL = staticURL + currentServiceName;

        }

I'm calling to performLogin in my controller, who expect to receive a "LoginResponse" class, but because the .then() is happening later, my "return this.loginResponse) happens before the .then() is even called.

How to I make him wait for the .then() to complete before returning?

Brocco · Accepted Answer · 2015-08-27 11:25:33Z

2

Q gives you the ability to create promises, which are very helpful for handling async operations. But the http service returns a promise, so need to create your own.

The promise is what you want to return from this method which will allow the consumer of this method to handle the result asynchronously.

performLogin = (data: LoginRequest): ng.IPromise<LoginResponse> => {
  var response = this.httpService.get(
      myServiceURL + '&' + ObjecttoParams(data))
    .then(function (response) {
      return response.data;
    });
  return response;
};

Then whatever is calling performLogin can do this:

foo.performLogin(x)
  .then((response) => {
    // do something here with the response data
  });

Bonus Points Saving the extra boilerplate of taking the constructor dependencies and mapping them directly onto the object...

constructor(
    private $http: ng.IHttpService,
    private $location: ng.ILocationService,
    private $q: ng.IQService) {
  // NOT NEEDED this.qService = $q;
  // NOT NEEDED this.httpService = $http;
  // NOT NEEDED this.locationService = $location;
  this.loginResponse = new LoginResponse();
  this.serviceURL = staticURL + currentServiceName;
}

By adding private in front of the params it will automatically add them as properties to the instance. BUT they will be the name they are injected as... so you would have to use this.$http instead of this.httpService

edited Aug 27, 2015 at 11:25

answered Aug 27, 2015 at 10:58

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

2 Comments

Ziv Weissman Over a year ago

tnx, trying right now, the Q.Promise should be $q ?

Brocco Over a year ago

Ah yes, thank you... I have been doing a lot of node, I will update the answer accordingly... it will actually be ng.IPromise as the return type

Collectives™ on Stack Overflow

Async call back fires after method return (angularjs .then())

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related