为什么 switchmap 的工作方式就像将 observable<t> 转换为 t

Question

我正在开发一个 Angular 项目，遇到了 switchMap 似乎将 Observable 转换为布尔值的情况。这是代码：

    ngOnInit(): void {
        this.hello().subscribe((res: Observable<any>) => {
          console.log(res);
        });
    }
    
    hello(): Observable<any> {
        const deltePromise = this.delete().then((res: boolean) => {
          if (res) {
            return of(true);
          } else {
            return of(false);
          }
        });
        return from(deltePromise).pipe(
          tap((res) => console.log(res)),
          switchMap((res) => res),
          tap((res) => console.log(res)),
        );
    }
    
    delete(): Promise<any> {
        if (true) {
          return Promise.resolve(true);
        } else {
          return Promise.resolve(false);
        }
     }

控制台输出为：

observable
true
true

我的问题是：为什么 switchMap 将 Observable 转换为布尔值？在这种情况下 switchMap 的行为是什么？

Answer 1

这是因为在第一次点击时，您将在

then

块上返回一个可观察量，因此点击，将收到一个可观察量。

但是当你将它传递给

switchMap

时，它的工作就是从外部可观察量（

from(delete)

）切换到内部可观察量（这里是

of(true)

）。

因此 switchMap 解析可观察对象并仅返回内部的值。

因此第二个

tap

返回一个布尔值。

---

from

运算符会将 Promise 转换为 observable，因此不需要

then

块以及

switchMap

，因为不会有内部 observable 需要解析。这样您就可以将代码解析为。

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { Observable, of, from, tap, switchMap } from 'rxjs';
@Component({
  selector: 'app-root',
  standalone: true,
  template: ``,
})
export class App {
  ngOnInit(): void {
    this.hello().subscribe((res: Observable<any>) => {
      console.log(res);
    });
  }

  hello(): Observable<any> {
    const deltePromise = this.delete();
    return from(deltePromise).pipe(tap((res) => console.log(res)));
  }

  delete(): Promise<any> {
    return Promise.resolve(true);
  }
}

bootstrapApplication(App);

Stackblitz 演示