2

假设用户输入触发了一个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：我看过一些类似的问题，虽然看起来很具体，但我尽量笼统。

4

1 回答 1

1

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

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可以代替使用。

于 2018-06-30T01:48:41.867 回答