Как отменить асинхронное действие с 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);