angular - rxjs 发布重播 : reset on Error

Question

我正在使用 publishReplay(1).refCount() 在 Angular5 中缓存 http 请求。这工作正常 - 除了错误情况。

我吞下并报告来自 http 源的异常，这就是我在下面的代码中传递 Observable.of(undefined) 的原因。在这种情况下，它当然会缓存 undefined - 但后续订阅者不应该获得该值，而是应该再次请求 http 资源，就像没有缓存一样。

我当前的代码:

result: Observable<any>;
list() {

  if (this.result === undefined) {
    this.result = this.http.get(`https://swapi.co/api/people`)
      .catch(error => {
        console.error("Something really bad happened", error);
        return Observable.of(undefined);
        // in that case, reset publishReplay
      })
      .publishReplay(1)
      .refCount();
  }

  return this.result;
}

我有一个 stackblitz(使用 shareReplay，但同样的问题)来显示行为:https://stackblitz.com/edit/angular-s5zuqa .单击“加载”应该重新请求 http 源，而不是从 catch 中提供缓存的对象。

Answer 1

所以如果我没理解错的话，你正在找这个，对吧？这里有两件重要的事情需要注意:

1. 我们使用 shareReplay(1) 而不是 publishReplay(1).refCount()。
2. catch 已移至多播运算符后面。

您会在第一时间看到(伪造的)HTTP 调用错误，发出 undefined(因为我们捕获了它)。下一次，我们再次运行该请求，这次得到的结果 (42) 已缓存用于第三次运行，不会引发另一个请求。

// Just to keep track of how often we sent the request already
let counter = 1;

// A fake HTTP request which errors the first time, then succeeds
const request$ = Rx.Observable.of(null)
  .do(() => console.log('HTTP Request (#' + counter + ')!'))
  .delay(250)
  .switchMap(() => counter++ === 1 
    ? Rx.Observable.throw('Error!')
    : Rx.Observable.of(42)
  );

// =========

const result$ = request$
  .shareReplay(1)
  .catch(() => Rx.Observable.of(undefined))
;

Rx.Observable.timer(0, 1000)
  .take(3)
  .do(() => console.log('Subscribing to result$…'))
  .switchMap(() => result$)
  .subscribe(value => console.log('Received value: ', value));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.min.js"></script>