Question

我在Angular项目中使用 ngrx 。在这个例子中，我有一系列请求。我希望在每个请求之后发送一个动作，但是在完成所有请求之后。

到目前为止，我看起来像这样：

Observable.forkJoin(requests).pipe(
  map(() => new actions.requestsSuccessful()),
  catchError(() => of(new actions.requestsFailed()))
);

其中requests是一个Observables数组。

上述代码运行正常，当所有请求完成后，我的requestsSuccessful()操作已正确发送。

但是，我正在实施一个进度条，我希望在每个请求完成后更新，但我也希望将操作分配到所有请求已经提出。

我无法弄清楚如何在每个请求之后调度操作，同时在完成所有操作后保持操作。

有什么想法吗？

Answer 1

forkJoin仅在所有Observable完成时才会发出，因此在此处无效。相反，您可以使用concatAll和concat。

如果我理解正确的话，这是模拟你想要的模型示例。

const makeRequest = (v) => of(v)
  .pipe(
    delay(1000), // Simulate delay
    map(response => ({ action: 'WHATEVER', response })), // Map response into action
  );

const requests = [makeRequest(1), makeRequest(2), makeRequest(3)];

from(requests)
  .pipe(
    concatAll(), // Execute Observables in order one at the time
    concat(of({ action: 'ALL_DONE' })), // Append this when all source Observables complete
  )
  .subscribe(console.log);

查看实时演示（开放式控制台）：https://stackblitz.com/edit/rxjs6-demo-zyhuag?file=index.ts

此演示将打印以下输出：

{action: "WHATEVER", response: 1}
{action: "WHATEVER", response: 2}
{action: "WHATEVER", response: 3}
{action: "ALL_DONE"}

顺便说一句，在未来的RxJS版本中，您可以使用endWith运算符代替concat，使其更具可读性。 https://github.com/ReactiveX/rxjs/pull/3679

Answer 2

Haven没有测试过它。也许这有用。

let progress=0
Observable.forkJoin(requests.map(e=>e.do(()=>progress++)).pipe(
  map(() => new actions.requestsSuccessful()),
  catchError(() => of(new actions.requestsFailed()))
);

在forkJoin期间，如何为每个请求以及何时完成请求分派操作？

2 个答案: