Angular2 call to web service via a promise is resolved before web service called is complete

Question

I have an angular 2 service that has a function which returns data for a dropdown list. The function returns a promise.

Code from service below:

getStuff(): Promise<Stuff>
    {
            return this.http.get("http://myserver/myServices/myService.svc/rest/getStuff")
            .map(res => this.dataHandler.extractData(res)).toPromise()
            .catch(err => this.dataHandler.handleHttpError(err));
    }

I then call this function from a save event to update the new saved data so the dropdown which uses this data will have up-to-date data.

My code calling this service:

    ngOnInit()
    {
      this.onSavedSubscription = this.OnSaved.subscribe((data: any) =>
      {
        if (data.IsSuccessful)
        {
            this.myService.getStuff().then(
                res=>
                {
                    this.myService.stuffs = res;
                }
            );
      }
    }

When the above code is called, the getStuff function is called but before it can return updated data from the database, the code execution shifts to "then" and fills this.myService.stuffs with old data that is contained in res. I'm not sure what is going on. I thought "then" wouldn't execute until getStuff finished executing and returned the new data. Please help.

You are thinking right, it shouldn't execute getStuff().then() before get stuff promise is resolved. M.b. you have other code that conflicts with this part, it is hard to tell. — metamaker, Apr 04 '17 at 12:04
Thanks for your comment metamaker. Yes, I thought getStuff().then() would only execute after getStuff has finished and that the returning data from getStuff would be in res argument of getStuff().then(). This is how it behaves the first time, but during subsequent trips to the page, getStuff().then() executes before getStuff() has finished and res contains the old data. — LanceM, Apr 04 '17 at 12:10

score 0 · Answer 1 · answered Apr 07 '17 at 20:38

I found the reason for the behavior was that the data was being cached so I changed the service to the following:

getStuff(useCachedData: boolean = true): Promise<Stuff>
{
    if (useCachedData)
    {
        return this.http.get("http://myserver/myServices/myService.svc/rest/getStuff")
            .map(res => this.dataHandler.extractData(res)).toPromise()
            .catch(err => this.dataHandler.handleHttpError(err));
    }
    else
    {
        let headers = new Headers();
        headers.append('Cache-control', 'no-cache');
        headers.append('Cache-control', 'no-store');
        headers.append('Expires', '0');
        headers.append('Pragma', 'no-cache');


        return this.http.get("http://myserver/myServices/myService.svc/rest/getStuff", { headers: headers })
            .map(res => this.dataHandler.extractData(res)).toPromise()
            .catch(err => this.dataHandler.handleHttpError(err));
    }
}

This way I can choose whether to cache or not. If I am missing something or there is a better/simpler way to choose when to cache please comment and let me know.

Angular2 call to web service via a promise is resolved before web service called is complete

1 Answers1