how to avoid multiple http requests when same component is used twice

Question

How to avoid multiple http requests when same component is used twice in template

https://stackblitz.com/edit/angular-8sgrgz

hello component is used twice in the template and its making calling service method for http data

  return this.http
    .get('https://api.openweathermap.org/data/2.5/weather? 
      q=London&appid=517c7bbf790248290ad52d57725c4d5f')
    .map((res) => {return res.json()})
                  .catch((error:any) => 
                       Observable.throw(error.json().error || 'Server 
     error')).share();} 

the http request should happen only once 
but its happening more than once

Don't get the data directly from http, add a singleton service and inject it in the component and use a BehaviorSubject to store the fetched data. — Roberto Zvjerković
– Roberto Zvjerković, Commented May 2, 2019 at 6:09
if you check in the stackblitz link mentioned I have already done it in a service — kiran gudla
– kiran gudla, Commented May 2, 2019 at 7:04
Yeah, but you have to cache your requests. I'll add the answer in a minute. — Roberto Zvjerković
– Roberto Zvjerković, Commented May 2, 2019 at 7:34

Roberto Zvjerković · Accepted Answer · 2019-05-02 07:45:53Z

1

Add the Behaviour subject to hold your data once you fetch it:

private data$: BehaviorSubject<any> = new BehaviorSubject(null);

Add a function to get data:

  getData() {
    return this.data$.pipe(
      switchMap(data => {
        if (data) {
          return of(data); // If data was saved, just return it (you're actually returning an observable of data, because switchMap needs observables to switch for every other observable emission)
        } else {
          return this.http.get("") // If it wasn't, make a new http request
            .pipe(tap(newData => this.data$.next(newData))); // And save the data on the subject
        }
      })
    );
  }

Hope that helps.

edited May 2, 2019 at 7:45

answered May 2, 2019 at 7:38

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

how to avoid multiple http requests when same component is used twice

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related