通过使用Http，我们调用一个方法来进行网络调用，并返回一个Http可观察对象:
getCustomer() {
return this.http.get('/someUrl').map(res => res.json());
}
如果我们获取这个可观察对象并向其添加多个订阅者:
let network$ = getCustomer();
let subscriber1 = network$.subscribe(...);
let subscriber2 = network$.subscribe(...);
我们要做的是确保这不会导致多个网络请求。
这似乎是一个不寻常的场景，但实际上很常见:例如，如果调用者订阅了可观察对象以显示错误消息，并使用异步管道将其传递给模板，那么我们已经有两个订阅者了。
在RxJs 5中正确的方法是什么?
也就是说，这似乎工作得很好:
getCustomer() {
return this.http.get('/someUrl').map(res => res.json()).share();
}
但是这是RxJs 5中惯用的方法吗，或者我们应该用别的方法来代替?
注意:根据Angular 5的新HttpClient，所有示例中的.map(res => res. JSON())部分现在都是无用的，因为现在默认假设JSON结果。
我认为@ngx-cache/core对于维护http调用的缓存功能是有用的，特别是如果http调用是在浏览器和服务器平台上进行的。
假设我们有以下方法:
getCustomer() {
return this.http.get('/someUrl').map(res => res.json());
}
你可以在第一次执行时使用@ngx-cache/core的Cached装饰器将HTTP调用方法的返回值存储在缓存存储中(存储可以配置，请检查ng-seed/universal的实现)。下一次调用该方法时(无论是在浏览器平台上还是在服务器平台上)，将从缓存存储中检索该值。
import { Cached } from '@ngx-cache/core';
...
@Cached('get-customer') // the cache key/identifier
getCustomer() {
return this.http.get('/someUrl').map(res => res.json());
}
还可以使用缓存API使用缓存方法(has、get、set)。
anyclass.ts
...
import { CacheService } from '@ngx-cache/core';
@Injectable()
export class AnyClass {
constructor(private readonly cache: CacheService) {
// note that CacheService is injected into a private property of AnyClass
}
// will retrieve 'some string value'
getSomeStringValue(): string {
if (this.cache.has('some-string'))
return this.cache.get('some-string');
this.cache.set('some-string', 'some string value');
return 'some string value';
}
}
下面是客户端和服务器端缓存的包列表:
@ngx-cache/core:缓存实用程序
@ngx-cache/platform- Browser: SPA/Browser平台实现
@ngx-cache/platform-server:服务器平台实现
@ngx-cache/fs-storage:存储工具(服务器平台需要)
上面的大多数答案都适用于不接受输入的http请求。每次你想要使用一些输入进行api调用时，都需要重新创建请求。上面唯一可以处理这个问题的回复是@Arlo的回复。
我已经创建了一个稍微简单的装饰器，您可以使用它将响应共享给每个具有相同输入的调用者。与Arlo的回复不同，它不会对延迟的订阅者重放响应，而是将同时发生的请求作为一个请求来处理。如果目标是重放响应给延迟的观察者(也就是缓存的响应)，你可以修改下面的代码并用shaereplay(1)替换share():
https://gist.github.com/OysteinAmundsen/b97a2359292463feb8c0e2270ed6695a
import { finalize, Observable, share } from 'rxjs';
export function SharedObservable(): MethodDecorator {
const obs$ = new Map<string, Observable<any>>();
return (target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
const key = JSON.stringify(args);
if (!obs$.has(key)) {
// We have no observable for this key yet, so we create one
const res = originalMethod.apply(this, args).pipe(
share(), // Make the observable hot
finalize(() => obs$.delete(key)) // Cleanup when observable is complete
);
obs$.set(key, res);
}
// Return the cached observable
return obs$.get(key);
};
return descriptor;
};
}
用法:
@SharedObservable()
myFunc(id: number): Observable<any> {
return this.http.get<any>(`/api/someUrl/${id}`);
}
我把问题打了星号，但我会试着试一下。
//this will be the shared observable that
//anyone can subscribe to, get the value,
//but not cause an api request
let customer$ = new Rx.ReplaySubject(1);
getCustomer().subscribe(customer$);
//here's the first subscriber
customer$.subscribe(val => console.log('subscriber 1: ' + val));
//here's the second subscriber
setTimeout(() => {
customer$.subscribe(val => console.log('subscriber 2: ' + val));
}, 1000);
function getCustomer() {
return new Rx.Observable(observer => {
console.log('api request');
setTimeout(() => {
console.log('api response');
observer.next('customer object');
observer.complete();
}, 500);
});
}
这是证据:)
这里只有一个要点:getCustomer().subscribe(customer$)
我们不是订阅getCustomer()的api响应，我们是订阅一个ReplaySubject，它是可观察的，它也可以订阅一个不同的可观察对象，并且(这很重要)持有它最后发出的值并重新发布给它的任何(ReplaySubject的)订阅者。
rxjs 5.4.0(2017-05-09)增加了对shareereplay的支持。
为什么使用共享回放?
当您有不希望在多个订阅者之间执行的副作用或繁重的计算时，通常需要使用shareReplay。在您知道流的后期订阅者需要访问先前发出的值的情况下，它可能也很有价值。这种在订阅上重放价值的能力是share和shareereplay的区别所在。
你可以很容易地修改一个angular服务来使用它，并返回一个带有缓存结果的可观察对象，它只会进行一次http调用(假设第一次调用成功)。
Angular服务示例
这是一个非常简单的客户服务，使用共享回放。
customer.service.ts
import { shareReplay } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({providedIn: 'root'})
export class CustomerService {
private readonly _getCustomers: Observable<ICustomer[]>;
constructor(private readonly http: HttpClient) {
this._getCustomers = this.http.get<ICustomer[]>('/api/customers/').pipe(shareReplay());
}
getCustomers() : Observable<ICustomer[]> {
return this._getCustomers;
}
}
export interface ICustomer {
/* ICustomer interface fields defined here */
}
注意，构造函数中的赋值可以移动到getCustomers方法，但由于HttpClient返回的可观察对象是“冷的”，因此在构造函数中这样做是可以接受的，因为http调用只会在订阅的第一个调用中进行。
此外，这里还假设初始返回的数据在应用程序实例的生命周期内不会过时。
