RxJS 5 Observable and Angular2 http: Call ajax once, save the result, and subsequent ajax calls use cached result

Question

The code below is a simplified version of what I currently have:

name.service.ts

@Injectable() export class NameService { const nameURL = "http://www.example.com/name"; getName() { return this.http.get(nameURL); } }

name1.component.ts

@Component({ templateUrl: './name1.component.html', styleUrls: ['./name1.component.css'] }) export class Name1Component implmenets OnInit { private name1; constructor( private nameService: NameService ){} ngOnInit() { this.setupName(); } private setupName() { this.nameService.getName() .subscribe( resp => this.name1 = resp, error => this.name1 = "unknown" ); } }

name2.component.ts

@Component({ templateUrl: './name2.component.html', styleUrls: ['./name2.component.css'] }) export class Name2Component implmenets OnInit { private name2; constructor( private nameService: NameService ){} ngOnInit() { this.setupName(); } private setupName() { this.nameService.getName() .subscribe( resp => this.name2 = resp, error => this.name2 = "unknown" ); } }

Here is what I want to do, name1.component.ts will first call the getName method of the NameService class. getName will then make an ajax call and return an observable.

Next, name2.component.ts will also call the same getName method of the NameService class, and getName will also perform the same ajax call and return an observable.

Is it possible using rxjs whereby when getName method in NameService makes its first ajax call, it then stores the result of the ajax call. Any subsequent function calls to the getName method will instead return the cache result of the first ajax call and not perform another redundant ajax.

try saving these value in localstorage of the browser. First check localstorage if values did'nt exist make a call to server else retrieve it from localstorage and use it — rashfmnb
– rashfmnb, Commented Jan 9, 2017 at 15:28
You can. Here is the link: syntaxsuccess.com/viewarticle/… — Igor Janković
– Igor Janković, Commented Jan 9, 2017 at 15:28
@IgorJanković I read the link you shared and tried implementing it in my code. But it doesn't work. I still see 2 network requests being made in the browser as opposed to one. — Thanesh R
– Thanesh R, Commented Jan 9, 2017 at 17:01

Nuvanda · Accepted Answer · 2017-07-28 13:09:39Z

You can subscribe to the Observable multiple times, so if all you want to do is save the second network request for data shared between two Components, you can cache it in your Service like this:

@Injectable() export class NameService { const nameURL = "http://www.example.com/name"; private cache: Observable<any>; getName() { return this.cache || this.cache = this.http.get(nameURL); } }

Collectives™ on Stack Overflow

RxJS 5 Observable and Angular2 http: Call ajax once, save the result, and subsequent ajax calls use cached result

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related