Rxjs Observer / Observable + Caching + Subscriptionを使用したキャッシュ可能なHTTP応答データ
以下のコードを参照してください
*免責事項：私はrxjsを初めて使用するので、観察可能/観察者アプローチを誤用している可能性があることに注意してください。私の解決策は純粋に私が見つけた他の解決策の集まりであり、単純な十分に文書化された解決策を見つけることができなかった結果です。したがって、私は他の人を助けることを期待して、（私が見つけたかった）私の完全なコードソリューションを提供しています。
*注、このアプローチは大まかにGoogleFirebaseObservablesに基づいています。残念ながら、私は彼らが内部でやったことを再現するための適切な経験/時間を欠いています。ただし、以下は、キャッシュ可能なデータへの非同期アクセスを提供する単純な方法です。
状況：「製品リスト」コンポーネントには、製品のリストを表示するタスクがあります。このサイトは、ページに表示されている商品を「フィルター」するいくつかのメニューボタンを持つ単一ページのWebアプリです。
解決策：コンポーネントはサービスメソッドに「サブスクライブ」します。serviceメソッドは、コンポーネントがサブスクリプションコールバックを通じてアクセスする製品オブジェクトの配列を返します。サービスメソッドは、新しく作成されたオブザーバーでアクティビティをラップし、オブザーバーを返します。このオブザーバー内で、キャッシュされたデータを検索し、それをサブスクライバー（コンポーネント）に返し、戻ります。それ以外の場合は、http呼び出しを発行してデータを取得し、応答をサブスクライブします。そこでデータを処理し（たとえば、データを独自のモデルにマップし）、データをサブスクライバーに返します。
コード
product-list.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { ProductService } from '../../../services/product.service';
import { Product, ProductResponse } from '../../../models/Product';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
products: Product[];
constructor(
private productService: ProductService
) { }
ngOnInit() {
console.log('product-list init...');
this.productService.getProducts().subscribe(products => {
console.log('product-list received updated products');
this.products = products;
});
}
}
product.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable, Observer } from 'rxjs';
import 'rxjs/add/operator/map';
import { Product, ProductResponse } from '../models/Product';
@Injectable()
export class ProductService {
products: Product[];
constructor(
private http:Http
) {
console.log('product service init. calling http to get products...');
}
getProducts():Observable<Product[]>{
//wrap getProducts around an Observable to make it async.
let productsObservable$ = Observable.create((observer: Observer<Product[]>) => {
//return products if it was previously fetched
if(this.products){
console.log('## returning existing products');
observer.next(this.products);
return observer.complete();
}
//Fetch products from REST API
console.log('** products do not yet exist; fetching from rest api...');
let headers = new Headers();
this.http.get('http://localhost:3000/products/', {headers: headers})
.map(res => res.json()).subscribe((response:ProductResponse) => {
console.log('productResponse: ', response);
let productlist = Product.fromJsonList(response.products); //convert service observable to product[]
this.products = productlist;
observer.next(productlist);
});
});
return productsObservable$;
}
}
product.ts（モデル）
export interface ProductResponse {
success: boolean;
msg: string;
products: Product[];
}
export class Product {
product_id: number;
sku: string;
product_title: string;
..etc...
constructor(product_id: number,
sku: string,
product_title: string,
...etc...
){
//typescript will not autoassign the formal parameters to related properties for exported classes.
this.product_id = product_id;
this.sku = sku;
this.product_title = product_title;
...etc...
}
//Class method to convert products within http response to pure array of Product objects.
//Caller: product.service:getProducts()
static fromJsonList(products:any): Product[] {
let mappedArray = products.map(Product.fromJson);
return mappedArray;
}
//add more parameters depending on your database entries and constructor
static fromJson({
product_id,
sku,
product_title,
...etc...
}): Product {
return new Product(
product_id,
sku,
product_title,
...etc...
);
}
}
Chromeでページを読み込んだときに表示される出力の例を次に示します。初期ロードでは、製品はhttpからフェッチされることに注意してください（ポート3000でローカルに実行されているノードレストサービスを呼び出します）。次にクリックして製品の「フィルターされた」ビューに移動すると、製品がキャッシュに見つかります。
私のChromeログ（コンソール）：
core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
app.component.ts:19 app.component url: /products
product.service.ts:15 product service init. calling http to get products...
product-list.component.ts:18 product-list init...
product.service.ts:29 ** products do not yet exist; fetching from rest api...
product.service.ts:33 productResponse: {success: true, msg: "Products found", products: Array(23)}
product-list.component.ts:20 product-list received updated products
... [メニューボタンをクリックして製品をフィルターしました] ...
app.component.ts:19 app.component url: /products/chocolatechip
product-list.component.ts:18 product-list init...
product.service.ts:24 ## returning existing products
product-list.component.ts:20 product-list received updated products
結論：これは、これまでに見つけた、キャッシュ可能なhttp応答データを実装する最も簡単な方法です。私の角度付きアプリでは、製品の別のビューに移動するたびに、製品リストコンポーネントが再ロードされます。ProductServiceは共有インスタンスのようです。そのため、ProductService内の「products：Product []」のローカルキャッシュはナビゲーション中に保持され、その後の「GetProducts（）」の呼び出しはキャッシュされた値を返します。最後に、「メモリリーク」を防ぐために終了時にオブザーバブル/サブスクリプションを閉じる方法についてのコメントを読みました。ここには含まれていませんが、覚えておく必要があります。