使用Rxjs Observer/Observable + 缓存 + 订阅实现可缓存的HTTP响应数据
请查看以下代码
*免责声明：我是rxjs的新手，因此请注意我可能会误用observable/observer方法。我的解决方案纯粹是其他解决方案的综合体，并且是由于未能找到简单的文档解释而导致的结果。因此，我提供了完整的代码解决方案（就像我希望找到的那样），以帮助他人。
*请注意，这种方法基于GoogleFirebaseObservables。不幸的是，我缺乏适当的经验/时间来复制他们在内部所做的事情。但以下是一种提供对某些可缓存数据异步访问的简单方法。
情况：'product-list'组件负责显示产品列表。该网站是一个单页面Web应用程序，其中一些菜单按钮将“过滤”显示在页面上的产品。
解决方案：该组件“订阅”服务方法。服务方法返回一组产品对象，组件通过订阅回调访问这些对象。服务方法将其活动包装在一个新创建的Observer中并返回该观察者。在此观察者内部，它搜索缓存数据并将其传递回订阅者（组件），然后返回。否则，它会发出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[]>{
let productsObservable$ = Observable.create((observer: Observer<Product[]>) => {
if(this.products){
console.log('## returning existing products');
observer.next(this.products);
return observer.complete();
}
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);
this.products = productlist;
observer.next(productlist);
});
});
return productsObservable$;
}
}
product.ts (the model)
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...
){
this.product_id = product_id;
this.sku = sku;
this.product_title = product_title;
...etc...
}
static fromJsonList(products:any): Product[] {
let mappedArray = products.map(Product.fromJson);
return mappedArray;
}
static fromJson({
product_id,
sku,
product_title,
...etc...
}): Product {
return new Product(
product_id,
sku,
product_title,
...etc...
);
}
}
以下是我在Chrome浏览器中加载页面时看到的输出示例。请注意，在初始加载时，产品是从http获取的（调用我的本地运行在端口3000上的节点rest服务）。当我点击导航到“过滤”视图时，产品将在缓存中找到。
我的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（）”的调用返回缓存值。最后需要注意的一点是，我已经阅读了有关observable /订阅需要关闭以防止“内存泄漏”的评论。虽然我没有在此处包括它，但这是需要记住的事情。
