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, Jan 09 '17 at 15:28
You can. Here is the link: http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0 — Igor Janković, Jan 09 '17 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, Jan 09 '17 at 17:01
check this answer http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in — rashfmnb, Jan 09 '17 at 17:57
http://stackoverflow.com/documentation/rxjs/8247/common-recipes/26490/caching-http-responses#t=201702191016404990814 — martin, Feb 19 '17 at 10:16

score 4 · Accepted Answer · answered Jul 28 '17 at 13:09

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);
    }
}

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

1 Answers1