web-dev-qa-db-ja.com

Angular / RxJS 6：HTTPリクエストの重複を防ぐ方法は？

現在、共有サービス内のメソッドが複数のコンポーネントによって使用されるシナリオがあります。このメソッドは、常に同じ応答を持つエンドポイントに対してHTTP呼び出しを行い、Observableを返します。最初の応答をすべてのサブスクライバーと共有して、HTTP要求の重複を防ぐことはできますか？

以下は、上記のシナリオの簡略版です。

class SharedService {
  constructor(private http: HttpClient) {}

  getSomeData(): Observable<any> {
    return this.http.get<any>('some/endpoint');
  }
}

class Component1 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something...')
    );
  }
}

class Component2 {
  constructor(private sharedService: SharedService) {
    this.sharedService.getSomeData().subscribe(
      () => console.log('do something different...')
    );
  }
}
angularrxjsangular6rxjs6
19
patryk0605

パーティーには遅れましたが、この使用例に対処するために 具体的には再利用可能なデコレータ を作成しました。ここに掲載されている他のソリューションと比較してどうですか？

  • すべてのボイラープレートロジックを抽象化し、アプリのコードをクリーンなままにします
  • 引数を持つメソッドを処理し、異なる引数を持つメソッドへの呼び出しを共有しないようにします。
  • whenを構成する方法を提供し、基礎となるオブザーバブルを共有したい（ドキュメントを参照）。

これは、さまざまなAngular関連のユーティリティで使用する傘の下で公開されています。

インストールしてください：

npm install @ngspot/rxjs --save-dev

それを使う：

import { Share } from '@ngspot/rxjs/decorators';

class SharedService {
  constructor(private http: HttpClient) {}

  @Share()
  getSomeData(): Observable<any> {
    return this.http.get<any>('some/endpoint');
  }
}
0
Dmitry Efimenko