在 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

在链接中。

问题：

1. 由于 .subscribe() 是在 .pipe() 之后调用的，它是如何工作的？我的意思是只有在 .subscribe() 之后它才得到值，那么它是如何通过 .pipe() 的？请帮助我理解这一点。
2. 当我们像这样进行 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）

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

一旦subscribeobservable 类中的pipe函数被触发，该函数就会发挥作用。因为记住 observable 不是直接订阅的。它是someObs.pipe(...).subscribe()。它类似于声明someData.getSum().getAverage()。getSum()应用于函数的结果someData将是getAverage()函数的输入。以同样的方式，管道中的运算符将应用于源 observable，它将返回一个新的修改过的 observable。订阅等待这个可观察的。

非正式例子

订购披萨场景

+----------------------------------+---------------------------------------+
|          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                     |
+----------------------------------+---------------------------------------+

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

1. 你点了披萨然后等着。你不知道什么时候会收到比萨饼（非正式地说，一些特权人士可能会援引优越感并排长队）。订阅不知道它何时会收到数据的方式相同。这就是使它异步的原因（幸运的是 RxJS 不会基于任何东西进行区分）。无论其属性如何，所有订阅都将等待。

2. 现在很容易误认为订阅与 observable 没有任何关系。它只是一个等待接收数据的观察者，而 observable 已经开始处理它的语句。那将是错误的。在这种情况下，订阅回调应该在您订阅后立即接收数据。但实际上，observable 直到被订阅才开始。