Mitigate multiple http request in Angular2 Service

Question

I am trying to share the result of an http request from the following service with multiple components. The problem I am experiencing, is that each component's request for the getMe() function creates a new http call. The MeService service is only declared as a provider in the root module of the page, and imported in each *.component.ts, so this is not caused by the (common) mistake of redeclaring the service multiple times as a provider in all child components. As you'll be able to tell from the output, it is most likely caused due to the async nature of the call, but correct me if I'm wrong.

Here is the service code:

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class MeService {

    private apiUrl = 'api/get/me';

    private me: Object;

    constructor(private http: Http) { }

    getMe(): Promise<Object> {

        console.log("OBSERVATION 1: " + this.me);

        if (this.me) {

            //Not sure if this is correct or not, I've never reached this block yet
            return Promise.resolve(this.me)

        } else {

            return this.http.get(this.apiUrl)
                .toPromise()
                .then(response => {

                    console.log("OBSERVATION 2: " + this.me);

                    this.me = response.json();

                    console.log("OBSERVATION 3: " + this.me);

                    return this.me
                })
                .catch(this.handleError);

        }
    }

    //Not relevant, just for completeness
    private handleError(error: any): Promise<any> {

        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);

    }
}

The output in the console. Mind that the [object Object] are filled with the correct data, I have checked this and omitted the JSON.Stringify() for clarity.

OBSERVATION 1: undefined

OBSERVATION 1: undefined

OBSERVATION 2: undefined

OBSERVATION 3: [object Object]

OBSERVATION 2: [object Object]

OBSERVATION 3: [object Object]

What I believe is happening, is that the Angular components are loaded before any http call has returned, causing multiple requests at bootstrapping. What would be the correct and best way of mitigating this?

score 2 · Accepted Answer · answered Mar 06 '17 at 17:25

2

Try returning the request itself and performing the operation inside your component. Do you have to use promises? Angular prefers observables.

return this.http.get(this.apiUrl).map(res => res.json());

Then subscribe in each of your components.

answered Mar 06 '17 at 17:25

chrispy

3,552
1
11
19

Flagging this as the correct answer, as it led me to this working implementation: [http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in](http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in/36291681#36291681) – Arnaud H Mar 10 '17 at 17:45

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

0

Thanks to the hint from chrispy, I dove into Observables and it appears that they indeed are the preferred way of implementing async http calls. However, merely subscribing from within the components did not prevent multiple calls from the service to the API, I didn't get it to work until I found this answer. I'm not sure whether it is a best practise, but it works.

edited May 23 '17 at 12:34

Community

1
1

answered Mar 06 '17 at 18:34

Arnaud H

881
2
10
16

Mitigate multiple http request in Angular2 Service

2 Answers2