取消一系列连续的异步请求

Question

假设用户输入触发了一个 http 请求 A，应用程序必须根据 A 的结果再次请求 B 并显示最终结果。

如果收到新的用户输入，则应取消所有 http 请求。

我的例子是链接 switchMaps。新的点击将中止并重新启动第一个 switchMap 请求。第一个 switchMap 的新输出将取消并重新启动第二个。但是，单击不会重新启动第二个 switchMap。

我很感激有关如何重新考虑这一点的建议。取消请求是目标，过滤/忽略结果是作弊:)。

http://jsbin.com/roranoh/4/edit?js,console

function obFc(name) {
  return {
    next: function (x) { console.log(name+ ' - ' + x)  },
    error: function (err) { console.log(name +' error ' + err) },
    complete: function () { console.log(name +' done') },
  }
};

function simulateHttp(val: any, delay:number) {
    return Rx.Observable.of(val).delay(delay);
}

click1$ = Rx.Observable.of('1').delay(1000);
click2$ = Rx.Observable.of('2').delay(4000);

click$ = Rx.Observable.merge( click1$, click2$ );
click$.subscribe( obFc('Click') );

click$
  .switchMap( (val) => {
    console.log('Fetching data A' + val);
    return simulateHttp(val + " A", 2000);
  })
  .do((v)=> console.log('received:' + v))
  .switchMap( val => {
    console.log('Fetching data B')
    return simulateHttp( val + " B", 2000);
  })
  .subscribe( obFc('Finished ') );

PS：我看过一些类似的问题，虽然看起来很具体，但我尽量笼统。

Answer 1

只需移动第二个switchMap，使其直接链接到第一个switchMap内的simulateHttp：

click$
  .switchMap( (val) => {
    console.log('Fetching data A' + val);
    return simulateHttp(val + " A", 2000)
      .do((v)=> console.log('received:' + v))
      .switchMap(val => {
        console.log('Fetching data B')
        return simulateHttp(val + " B", 2000);
      });
  })
  .subscribe(obFc('Finished'));

然后，当再次点击时，外部switchMap 中组成的整个链将被取消订阅。

此外，内部 switchMap 永远不需要切换 - 因为 HTTP observable 只会发出一次 - 所以可以使用 mergeMap 代替。