在 Angular 中使用 .pipe() 和 .subscribe() 时的控制流

Question

在这种情况下，我对代码流有点困惑。请参考下面的代码。

import { fromEvent } from 'rxjs';
import { mapTo } from 'rxjs/operators';

let btn = document.getElementById("btnclick");
let btn_clicks = fromEvent(btn, 'click');
let positions = btn_clicks.pipe(mapTo ("Testing MapTo"));
positions.subscribe(x => console.log(x));

当我点击按钮时它输出Testing MapTo。一开始我认为每当发生按钮点击时，都会调用 .pipe() 方法，然后调用 .subscribe() 方法导致它在 控制台 中输出。但是我读到了，

subscribe is for activating the observable and listening for emitted values

在 .

问题：

既然 .subscribe() 是在 .pipe() 之后调用的，为什么它会起作用？我的意思是只有在 .subscribe() 之后它才获得价值，那么它是如何通过 .pipe() 的？请帮助我理解这一点。
当我们像这样进行 http 调用时会发生什么（假设返回的 obeservable 是 x ）：

this.http.get('url')
    .pipe(
      filter(x => x % 2 === 0),
      map(x => x + x)
    )
    .subscribe(x => {
        console.log(x);
    }

Answer 1

理解了pipe的意思，流程就清楚了。它按照它说的做，它在源和订阅发出的值之间传递一些东西。

source --->     modify results by       ---> subscription
               piping in operators

问题 1

click  --->  map (convert) click event     --->   console.log(x)
event        to string "Testing MapTo"

问题 2

   Http     --->  go forward only if   --->   map (convert)     ---> console.log(x)
observable        number is even            result = 2 * result

更新（冷 Observable）

当一个冷的可观察对象被订阅时（例如。positions.subscribe(x...），可观察对象class的subscribe方法被调用。之后回调函数进入中断模式并等待 observable 发出。这是关键。订阅会触发 observable 中的语句序列到 action，但它 not 知道 observable 何时发出。这就是为什么observable调用push方法获取一个值。可观察对象在准备就绪时推送输出。

一旦observable class中的subscribe函数被触发，pipe函数就会发挥作用。因为记住 observable 不是直接订阅的。是someObs.pipe(...).subscribe()。它类似于语句 someData.getSum().getAverage()。 getSum() 函数应用于 someData 的结果将是 getAverage() 函数的输入。同样，管道中的运算符将应用于源可观察对象，这将 return 一个新的修改后的可观察对象。订阅等待这个可观察的。

非正式示例

订购披萨场景

+----------------------------------+---------------------------------------+
|          Ordering pizza          |       Subscribing to observable       |
+----------------------------------+---------------------------------------+
| Place order                      | Subscribe to observable               |
| Kitchen worker starts processing | The observable starts processing      |
| No onions                        | Filter some values                    |
| Double chesse                    | Map the values to return (2 * values) |
| Some other toppings              | Some other operators                  |
| Receive the pizza                | Receive the value                     |
+----------------------------------+---------------------------------------+

这里要注意两件重要的事情：

你点了披萨然后等着。您不知道什么时候会收到披萨。与订阅不知道何时接收数据的方式相同。这就是它异步的原因（幸运的是，RxJS 不会基于任何东西进行区分）。无论其属性如何，所有订阅都将等待。
现在很容易误认为订阅与可观察对象没有任何关系。它只是一个等待接收数据的观察者，而可观察对象已经开始处理它的语句。那是错误的。在这种情况下，订阅回调应该在您订阅后立即接收数据。但实际上，在订阅之前，observable 不会启动。

在 Angular 中使用 .pipe() 和 .subscribe() 时的控制流

Control Flow when using .pipe() and .subscribe() in Angular

pipe

subscribe

observable

rxjs

angular

问题 1

问题 2

更新（冷 Observable）

非正式示例