網址：https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap

> The main difference between switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.

switchMap 和其他扁平化運算子的主要區別在於取消效果。 在每次發射時，先前的內部 observable（您提供的函式的結果）被取消並訂閱新的 observable。 您可以透過短語 switch to a new observable 記住這一點。

> This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives. This also is a safe option in situations where a long lived inner observable could cause memory leaks, for instance if you used mergeMap with an interval and forgot to properly dispose of inner subscriptions. Remember, switchMap maintains only one inner subscription at a time, this can be seen clearly in the first example.

這對於像預先輸入這樣的場景非常有效，當新輸入到達時，您不再關心先前請求的響應。 在長期存在的內部 observable 可能導致記憶體洩漏的情況下，這也是一個安全的選擇。

> Be careful though, you probably want to avoid switchMap in scenarios where every request needs to complete, think writes to a database. switchMap could cancel a request if the source emits quickly enough. In these scenarios mergeMap is the correct option.

但是要小心，您可能希望在每個請求都需要完成的情況下避免使用 switchMap，比如寫入資料庫的場景。 如果源發出足夠快，switchMap 可以取消請求。 在這些情況下，mergeMap 是正確的選項。

看這個例子：

```typescript
import { interval, fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

fromEvent(document, 'click')
.pipe(
  // restart counter on every click
  switchMap(() => interval(1000))
)
.subscribe(console.log);
```

每次點選螢幕之後，fromEvent issue 出來的 MouseEvent，傳入 switchMap 內部，都會重啟一個新的時間間隔為1秒的計時器，並且取消之前的定時器。列印如下：

![](https://img-blog.csdnimg.cn/img_convert/cffaecdb906aa435a846a5d4da0cc65f.png)

再看一個實現定時器的例子：

```typescript
import { Component, OnInit } from '@angular/core';
import { interval, fromEvent, merge, empty } from 'rxjs';
import { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators';

const COUNTDOWN_SECONDS = 1000;

@Component({
  selector: 'switchMap-study',
  templateUrl: './switchMap.component.html'
})
export class SwitchMapComponent implements OnInit {
    ngOnInit(): void {

// elem refs
    const remainingLabel = document.getElementById('remaining');
    const pauseButton = document.getElementById('pause');
    const resumeButton = document.getElementById('resume');

// streams
    const interval$ = interval(1000).pipe(mapTo(-1));
    const pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false));
    const resume$ = fromEvent(resumeButton, 'click').pipe(mapTo(true));

const timer$ = merge(pause$, resume$).pipe(
        startWith(true),
        switchMap(val => (val ? interval$ : empty())),
        scan((acc, curr) => (curr ? curr + acc : acc), COUNTDOWN_SECONDS),
        takeWhile(v => v >= 0)).subscribe((val: any) => (remainingLabel.innerHTML = val));
    }
}
```

```html
<h1>Switch Map Study</h1>

<a href="https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap" rel="nofollow">Document</a>

<h4>
    Time remaining: <span id="remaining"></span>
    </h4>
    <button id="pause">
    Pause Timer
    </button>
    <button id="resume">
    Resume Timer
</button>
```

![](https://img-blog.csdnimg.cn/img_convert/7857cc9a313736fb776e272544101b20.png)

剛開始時，startWith true，因此 switchMap 得以繼續下去。switchMap 傳入的 project，接受的引數 val 是 boolean 型別，返回一個新的 Observable，即 internal$.

![](https://img-blog.csdnimg.cn/img_convert/509b88e1a7739a24a84a365d65772b6d.png)

![](https://img-blog.csdnimg.cn/img_convert/76831bfae529077967d23a8620d89d1e.png)

注意 empty() 的用法，返回一個型別為 never 的 Observable.

> Creates an Observable that emits no items to the Observer and immediately emits a complete notification.

> Just emits 'complete', and nothing else.

> This static operator is useful for creating a simple Observable that only emits the complete notification. It can be used for composing with other Observables, such as in a mergeMap.

單步除錯點了 pause 之後：

![](https://img-blog.csdnimg.cn/img_convert/07c85fb09ece0c65d5a0a90e177835d3.png)

![](https://img-blog.csdnimg.cn/img_convert/7037d522b515111611466252821a8eb8.png)

第 41 行 unsubscribe 方法，體現了 switchMap 自動取消先前的內部 observable 的特性：

![](https://img-blog.csdnimg.cn/img_convert/fa71befe098786026359145aa2c05da4.png)

![](https://img-blog.csdnimg.cn/img_convert/6bc63c14163a19c8ca5db05e18e5bede.png)

先 cancel，再訂閱新的 Observable：
![](https://img-blog.csdnimg.cn/img_convert/94cc5702de4e887acb8329b8138b5ced.png)

如果返回 empty，就不會再執行後續的 scan 了：
![](https://img-blog.csdnimg.cn/img_convert/b0ef003a2ba89cae23ae5872ddb7d5a2.png)

可以把 switchMap 輸入引數，即 projection 進行改造：

![](https://img-blog.csdnimg.cn/img_convert/840f1153820af37f3ad3131593d993a9.png)

該 projection 的型別是一個箭頭函式，輸入引數是一個 boolean，輸出是一個新的 Observable.

![](https://img-blog.csdnimg.cn/img_convert/6284a4e6c224af31b85a9b2c2365b7e3.png)

RxJs SwitchMap 學習筆記

相關文章