switchmap和不同的observables

时间:2017-12-05 19:23:52

标签: angular rxjs

Angular和Rx的新手,尝试理解这一点......我的应用程序对UI事件作出反应,并导致调用返回Observable的HTTP服务。我订阅它是这样的:

this.myXYZService.search(query)
  .map(r => { // some code })
  .subscribe(r => { //some code });

假设该事件再次触发,并导致第二次调用同一个HTTP服务,该服务将在第一个调用结束之前返回一个全新的Observable。

现在,据我所知,我可以使用switchMap而不是map来丢弃旧的Observable并对新的Observable进行操作?或者我不正确地理解这个?如果在第一个事件之后触发第二个事件已经在链的订阅部分中会发生什么?在这种情况下,它将不再切换?既然JS是同步的,那么在第二个事件开始处理它的链之前,整个第一链都不会执行吗?

我想我对整个事情感到困惑,因为Observables的实例是不同的--Rx如何跟踪哪个调用切换?是功能名称吗?假设我有两个独立的代码块:

this.myXYZService.search('abcd')
  .map(r => { // some code })
  .subscribe(r => { //some code });

this.myXYZService.search('efgh')
  .map(r => { // some code })
  .subscribe(r => { //some code });

如果我在上面的两个上面都使用switchMap究竟发生了什么?第二个电话会取消第一个吗?

2 个答案:

答案 0 :(得分:3)

当外部observable发出时,

switchMap取消先前的内部observable。例如

Observable.fromEvent(inputEl, 'keydown') // outer observable
    .switchMap(event => {
        let value = event.value;

        return this.myXYZService.search(value); // inner observable
    })
    .subscribe(res => {
        // some code
    });

在这种情况下,每次外部observable(fromEvent)发出(在input元素的keydown上)时,内部observable(myXYZService.search)被调用,前一个内部observable被取消。

答案 1 :(得分:2)

你会想要像...这样的东西。

searchTerms.switchMap( searchTerm => this.myXYZService.search(searchTerm) ).subscribe(...)

只要新的搜索字词到达,就会忽略/丢弃任何正在进行的搜索调用。我不会使用取消这个词,因为呼叫仍然消失。但是,他们的结果将被忽略。

如果第一个请求在第二个搜索词发出之前返回,那么它将被发送到订阅。如果它没有那么它就不会。