[angular] RxJs 5에서 Angular Http 네트워크 호출 결과를 공유하는 올바른 방법은 무엇입니까?

업데이트 : Ben Lesh에 따르면 5.2.0 이후의 다음 마이너 릴리스에서는 shareReplay ()를 호출하여 실제로 캐시 할 수 있습니다.

이전 …

첫째, share () 또는 publishReplay (1) .refCount ()를 사용하지 마십시오. 동일하고 문제는, Observable이 활성화 된 상태에서 연결이 완료된 경우에만 공유하고 완료 한 후 연결하면 공유한다는 것입니다 실제로 캐싱이 아닌 새로운 관측 가능 번역을 다시 생성합니다.

Birowski는 ReplaySubject를 사용하는 올바른 솔루션을 제공했습니다. ReplaySubject는 우리의 경우 1에 주어진 값 (bufferSize)을 캐시합니다. refCount가 0에 도달하고 새로운 연결을 설정하면 캐싱에 대한 올바른 동작 인 share ()와 같은 새로운 관찰 가능 값을 생성하지 않습니다.

재사용 가능한 기능은 다음과 같습니다.

export function cacheable<T>(o: Observable<T>): Observable<T> {
  let replay = new ReplaySubject<T>(1);
  o.subscribe(
    x => replay.next(x),
    x => replay.error(x),
    () => replay.complete()
  );
  return replay.asObservable();
}

사용 방법은 다음과 같습니다.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { cacheable } from '../utils/rxjs-functions';

@Injectable()
export class SettingsService {
  _cache: Observable<any>;
  constructor(private _http: Http, ) { }

  refresh = () => {
    if (this._cache) {
      return this._cache;
    }
    return this._cache = cacheable<any>(this._http.get('YOUR URL'));
  }
}

다음은 캐시 가능한 기능의 고급 버전입니다.이 기능은 자체 조회 테이블 + 사용자 정의 조회 테이블을 제공 할 수 있습니다. 이런 식으로 위의 예와 같이 this._cache를 확인할 필요가 없습니다. 또한 Observable을 첫 번째 인수로 전달하는 대신 Observable을 반환하는 함수를 전달합니다. 이것은 Angular의 Http가 즉시 실행되기 때문입니다. 우리의 캐시.

let cacheableCache: { [key: string]: Observable<any> } = {};
export function cacheable<T>(returnObservable: () => Observable<T>, key?: string, customCache?: { [key: string]: Observable<T> }): Observable<T> {
  if (!!key && (customCache || cacheableCache)[key]) {
    return (customCache || cacheableCache)[key] as Observable<T>;
  }
  let replay = new ReplaySubject<T>(1);
  returnObservable().subscribe(
    x => replay.next(x),
    x => replay.error(x),
    () => replay.complete()
  );
  let observable = replay.asObservable();
  if (!!key) {
    if (!!customCache) {
      customCache[key] = observable;
    } else {
      cacheableCache[key] = observable;
    }
  }
  return observable;
}

용법:

getData() => cacheable(this._http.get("YOUR URL"), "this is key for my cache")

답변

.publishReplay(1)
.refCount();

import { shareReplay } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class CustomerService {

    private readonly _getCustomers: Observable<ICustomer[]>;

    constructor(private readonly http: HttpClient) {
        this._getCustomers = this.http.get<ICustomer[]>('/api/customers/').pipe(shareReplay());
    }

    getCustomers() : Observable<ICustomer[]> {
        return this._getCustomers;
    }
}

export interface ICustomer {
  /* ICustomer interface fields defined here */
}

//this will be the shared observable that 
//anyone can subscribe to, get the value, 
//but not cause an api request
let customer$ = new Rx.ReplaySubject(1);

getCustomer().subscribe(customer$);

//here's the first subscriber
customer$.subscribe(val => console.log('subscriber 1: ' + val));

//here's the second subscriber
setTimeout(() => {
  customer$.subscribe(val => console.log('subscriber 2: ' + val));
}, 1000);

function getCustomer() {
  return new Rx.Observable(observer => {
    console.log('api request');
    setTimeout(() => {
      console.log('api response');
      observer.next('customer object');
      observer.complete();
    }, 500);
  });
}