RxJS Observables，在发出 API 请求之前检查缓存答案

【问题标题】：RxJS Observables, check cache before making API requestRxJS Observables，在发出 API 请求之前检查缓存
【发布时间】：2017-11-05 12:35:12
【问题描述】：

我正在创建一个 Angular 应用程序并拥有一个 API 服务。如果请求的数据不在缓存中，我的 get 方法只会进行 HTTP 调用。我正在使用基于 Promise 的 LocalForage 库，并将它们转换为 Observables。

export class CacheService {
  get(prop: string) {
    return Observable.fromPromise(localForage.getItem(prop));
  }

现在在我的 API 服务中，我正在像这样对我的缓存和 http observables 进行竞赛：

export class ApiService {
  get(uri: string) {
      return Observable.race(
        this.cache
          .get(uri)
          .filter(res => !!res),

        this.http.get(uri)
      );
  }
}

由于Observable.race 只返回发出first 的observable，我认为只要使用.filter() 运算符，一切都会好起来的。但是，如果数据不在缓存中，它们都不会返回，因此永远不会发出 HTTP 请求。如果有人能指出我的错误或提出更好的解决方案，我会全力以赴。

【问题讨论】：

你的订阅在哪里？
@YakovFain 感谢您的回复。我确定我的订阅不是问题，因为如果我删除了.filter，那么我会得到一个空响应，因为缓存还没有任何东西。
@yazeedb 嗯....Observable.race 的行为对我来说似乎很奇怪。正如 Federico Galassi 在回答中提到的那样，当其中一个来源完成（因为 github.com/ReactiveX/rxjs/blob/master/src/…）时，它会发送 complete 通知，但它猜测这不是预期的行为。

标签： angular typescript rxjs observable

【解决方案1】：

问题是race 在其中一个可观察对象完成后立即完成。您的缓存调用不会发出 null 而是立即完成。您可以使用merge 在完成后继续，使用take(1) 仅考虑第一个结果：

export class ApiService {
  get(uri: string) {
      return Observable.merge(
        this.cache
          .get(uri)
          .filter(res => !!res),

        this.http.get(uri)
      ).take(1);
  }
}

【讨论】：