在RXJS5中共享角Http网络调用结果的正确方法是什么？

Question

getCustomer() {
    return this.http.get('/someUrl').map(res => res.json());
}

let network$ = getCustomer();

let subscriber1 = network$.subscribe(...);
let subscriber2 = network$.subscribe(...);

getCustomer() {
    return this.http.get('/someUrl').map(res => res.json()).share();
}

但是这是RXJS5中的惯用方法吗，还是我们应该做其他的事情呢？

注意：根据Angular 5 newHttpClient，所有示例中的.map(res=>res.JSON())部分现在都是无用的，因为现在默认情况下假定了JSON结果。

Answer 1

编辑：从2021年开始，正确的方法是使用RXJS本地提出的Sharereplay操作符。请参阅以下答案中的更多细节。

缓存数据，如果可用，则返回该数据，否则发出HTTP请求。

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {Data} from './data';

@Injectable()
export class DataService {
  private url: string = 'https://cors-test.appspot.com/test';
  
  private data: Data;
  private observable: Observable<any>;

  constructor(private http: Http) {}

  getData() {
    if(this.data) {
      // if `data` is available just return it as `Observable`
      return Observable.of(this.data); 
    } else if(this.observable) {
      // if `this.observable` is set then the request is in progress
      // return the `Observable` for the ongoing request
      return this.observable;
    } else {
      // example header (not necessary)
      let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      // create the request, store the `Observable` for subsequent subscribers
      this.observable = this.http.get(this.url, {
        headers: headers
      })
      .map(response =>  {
        // when the cached data is available we don't need the `Observable` reference anymore
        this.observable = null;

        if(response.status == 400) {
          return "FAILURE";
        } else if(response.status == 200) {
          this.data = new Data(response.json());
          return this.data;
        }
        // make it shared so more than one subscriber can get the result
      })
      .share();
      return this.observable;
    }
  }
}

柱塞示例