angular - 多个连续效果未完成？

Question

我不确定这篇文章的标题是否很好地解释了我的问题，但这是我的情况。

我有一棵树，里面有延迟加载的 child 。当您伸展树(Splay Tree)节点时，它会调度 LoadChildrenAction 以及刚刚展开的父节点作为负载。

这是我的效果:

  @Effect()
  loadChildren$: Observable<Action> = this.actions$
    .ofType(ActionTypes.LOAD_CHILDREN).switchMap((action: LoadChildrenAction) => {
      return this.categoryService.loadChildren(action.payload).map(
        children =>
          new LoadChildrenSuccessAction({
            parent: action.payload,
            children
          })
      );
  });

如果我只扩展一个节点，则效果非常好。 LoadChildrenSuccessAction 已调度，并在我的 reducer 中更新树。

但是，如果我展开一个节点，然后在第一个操作完成之前展开另一个节点，则只有最后一个操作完成。

也就是说，我展开一个节点，然后在第一个节点仍在加载时立即展开另一个节点。第二个树节点会使用其子内容进行更新，但第一个树节点永远不会更新。事实上，两个 LoadChildrenAction 被调度 - 每个扩展一个 - 但只有一个 LoadChildrenSuccessAction 被调度。

如果我将 console.log 放入我的 categoryService.loadChildren 函数中，它会被记录两次 - 因此该服务被调用两次。但只有一个操作被调度，所以我丢失了第一个操作 - 它永远不会完成。

知道我在这里做错了什么吗？

Answer 1

这是因为您正在使用 .switchMap ，如果在发出下一个可观察值之前尚未完成，它将取消上一个可观察值。第一个 loadChildren 被调用，当第二个在完成之前被调用时，第一个调用将被取消。

您可以使用 .mergeMap 来代替，这将允许您并行运行 loadChildren 的多个调用。请记住，这会消除重复请求的自动取消功能，因此如果您需要类似的功能，则必须自行处理。