如何使用rxjs取消异步操作？

Question

我想通过按钮Async increment触发异步操作，但通过单击按钮cancel取消它。

我的race中的rxjs代码无效。

有什么办法可以实现它？

https://codesandbox.io/s/zk5oy3zj7x

Answer 1

欢迎

switchMap如果在前一个请求完成之前出现了新请求，则取消前一个请求（完成前一个内部可观察值）。 如果要取消对新流的请求，可以将流与“动作一”合并，然后让switchMap决定要做什么。

merge(
  increment$.pipe(mapTo(true)),
  cancelIncrement$.pipe(mapTo(false))
).pipe(
  switchMap((run) => new Promise(resolve => {
    if(run) 
      setTimeout(() => resolve(2), 2000);
  }))
).subscribe(console.log);