使用 Rxjs Observer/Observable + 缓存 + 订阅的可缓存 HTTP 响应数据
请参阅下面的代码
*免责声明：我是 rxjs 的新手，所以请记住，我可能会滥用可观察/观察者方法。我的解决方案纯粹是我找到的其他解决方案的集合，并且是未能找到一个简单的、有据可查的解决方案的结果。因此，我提供了完整的代码解决方案（正如我希望找到的那样），希望它可以帮助其他人。
*注意，这种方法松散地基于 GoogleFirebaseObservables。不幸的是，我缺乏适当的经验/时间来复制他们在幕后所做的事情。但以下是提供对某些可缓存数据的异步访问的简单方法。
情况：“产品列表”组件的任务是显示产品列表。该网站是一个单页网络应用程序，带有一些菜单按钮，可以“过滤”页面上显示的产品。
解决方案：组件“订阅”服务方法。service 方法返回一个产品对象数组，组件通过订阅回调访问这些对象。服务方法将其活动包装在一个新创建的观察者中并返回观察者。在这个观察者内部，它搜索缓存的数据并将其传递回订阅者（组件）并返回。否则，它会发出一个 http 调用来检索数据，订阅响应，您可以在其中处理该数据（例如将数据映射到您自己的模型），然后将数据传回给订阅者。
编码
产品列表.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;
});
}
}
产品.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 响应数据的最简单方法。在我的 Angular 应用程序中，每次我导航到产品的不同视图时，产品列表组件都会重新加载。ProductService 似乎是一个共享实例，所以导航时会保留 ProductService 中 'products: Product[]' 的本地缓存，后续调用“GetProducts()”会返回缓存的值。最后一点，我已经阅读了有关在完成后如何关闭可观察对象/订阅以防止“内存泄漏”的评论。我没有在此处包含此内容，但请记住这一点。