キャッシュするHTTPクライアントをBehaviorSubjectを使って実装してみた例

キャッシュするHTTPクライアントをBehaviorSubjectを使って実装してみた例:

今回の構成

Angular4を使ってます。

今回の経緯

同じページで複数の子コンポーネントから同じリクエストを投げていたのを1回のリクエストで済ませたかった。

やったこと

HttpClientをもったサービスを作り、Getリクエストに対してBehaviorSubjectをObservableにして返すメソッドをはやした。

やってないこと

GETパラメータ対応とかやってない...

BehaviorSubjectの初期値を決めなきゃならなかったので配列限定にした...

とまあ実際にいろいろアプリに組み込む上であとで掲載するコードよりはもう少しファットになっているのですが、BehaviorSubject便利！の一つとしてシンプルに伝わればいいかなと思い省いています。

Subjectとは？

nextメソッドで流れてきた値をSubscriberに流す、SubscriberでありObservableなやつ

const subject = new Subject<number>(); 
 
subject.subscribe(number => console.log(number)); 
subject.next(1); 
//出力: 1 

BehaiviorSubjectとは？

Subjectに前回の値を保持する機能をもったもの。

.subscribeされたときに前回保持した値を最初に流す。

const behaiviorSubject = new BehaiviorSubject<number>(1); //Subjecｔと違い初期値をいれる必要あり 
 
subject.subscribe(number => console.log(number)); //初期値が流れてくる 
//出力: 1 
subject.next(2); 
//出力: 2 
subject.subscribe(number => console.log(number)); 
//出力: 2 

HTTPリクエストに使ってレスポンスを保持したもの

リクエストパスをキーに リクエストパス: BehaiviorSubject のMapを持っている。

getメソッド呼び出し時に

MapになければHTTPリクエスト、

MapにあればBehaiviorSubjectをObservableにして返す。

といったことをしております。

export class CachedApiService { 
  private requestMap: Map<string, BehaviorSubject<any[]>> = new Map(); 
 
  constructor(private http: HttpClient) {} 
 
  get<T>(path: string) { 
    if (!this.requestMap.get(path)) { 
      this.requestMap.set(path, new BehaviorSubject<T[]>([])); 
 
      this.http.get<T[]>(path, { params: this.params }).subscribe( 
        response => { 
          this.requestMap.get(path).next(response); 
        }, 
        error => this.requestMap.get(path).error(error) 
      ); 
    } 
 
    return this.requestMap.get(path).asObservable() as Observable<T[]>; 
  } 
} 

Angularでよかったこと

キャッシュ系っていつ更新するのか、とかどこに保持しておくのとか考える＆管理するのが面倒なイメージだったのですが、AngularのServiceとして作ることで表示する一番親ページのproviderとして呼び出せば同じページ内だけ重複したリクエストが飛ばない仕様にでき楽でした。

以下呼び出すとき

@Component({ 
  selector: 'app-parent', 
  templateUrl: './parent.component.html', 
  styleUrls: ['./parent.component.scss'], 
  providers: [ CachedApiService ] // ← ここ 
}) 
export class ParentComponent implements OnInit { 
... 

簡単ですが以上です！！