RxJS 5 Наблюдаемые и Angular2 HTTP: Call Аякса один раз, сохранить результат, и последующие вызовы Ajax использовать кэшированные результата

Question

Приведенный ниже код является упрощенной версией того, что я в настоящее время:

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

Вот что я хочу сделать, name1.component.ts сначала вызывает getName метод NameService класса. getName затем сделает вызов ajax и вернет наблюдаемый.

Далее, name2.component.ts будет также вызвать тот же самый getName метод NameService класса, и getName также будет выполнять тот же Ajax вызов и возврат наблюдаемого.

ли это возможно при использовании rxjs в результате чего, когда getName метод NameService делает свой первый вызов Ajax, он затем сохраняет результат вызова Ajax. Любые последующие вызовы функций для метода getName вместо этого возвращают результат кэша первого вызова ajax и не выполняют другой избыточный ajax.

Answer 1

Вы можете подписаться на наблюдаемые несколько раз, так что если все, что вы хотите сделать, это сохранить второй запрос сети для передачи данных совместно между двумя компонентами, вы можете кэшировать его в службе, как это:

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