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

KL_KISNE_DEKHA_HAI

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

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调用时会发生什么(说返回的observable是x):
this.http.get('url')
    .pipe(
      filter(x => x % 2 === 0),
      map(x => x + x)
    )
    .subscribe(x => {
        console.log(x);
    }
迈克尔·D

当您了解的含义时,流程就会很清楚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

更新资料

当观察对象被订阅时(例如positions.subscribe(x...),将subscribe调用Observable类方法。之后,回调函数进入中断模式,并等待观察对象发出。这是关键。订阅触发可观察到的动作语句序列,但它知道什么时候会观察到发射。这就是为什么将可观察值称为获取值的推入方法。当可观察对象准备就绪时,将其推送。

一旦subscribe触发了可观察类中的pipe函数,该函数便开始发挥作用。因为请记住,可观察对象不是直接订阅的。是的someObs.pipe(...).subscribe()这类似于声明someData.getSum().getAverage()getSum()应用于函数的结果someData将是getAverage()函数的输入以相同的方式,管道中的运算符将应用于源可观察对象,该源将返回新的修改后的可观察对象。订阅将等待这个可观察到的事件。

非正式的例子

订购披萨场景

+----------------------------------+---------------------------------------+
|          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. 现在很容易会误认为订阅与可观察项没有任何关系。那只是观察者在等待观察者已经开始处理其语句而等待接收数据。那是错误的。在这种情况下,订阅回调应在您订阅后立即接收数据。但是实际上,可观察对象直到被订阅后才开始。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Firebase中的Angular中使用Observable和Subscribe

Angular:何时在模块和控制器中使用“[]”

在JavaScript中使用pipe()和compose()函数?

在 Electron 中使用 SerialPort 和 Angular 在构建时失败

使用fork()和pipe()的IPC

在Dart中将Sink和Pipe与流一起使用有什么区别?

在简写 if 语句中使用 Angular Pipe

在pipe()中使用catchError()在.subscribe变量处显示错误

使用pipe()和fork()读取文件并输出到控制台/新文件

使用`each`和`yield`了解控制流

如何在GDB中使用pipe和awk设置变量?

使用cat,sort,tee和pipe原位修改文件时的行为不一致

在触发器中使用 DBMS_PIPE.PACK_MESSAGE 和 DBMS_PIPE.SEND_MESSAGE

Http Observable和Pipe的Angular 2用法

在Angular App中使用前进和后退导航箭头时断开套接字

在.Net Core 2.0和Angular中使用'dotnet publish'时找不到模块'aspnet-webpack'

在Angular8中使用管道和HttpService时简化API调用

在 Angular Material Table 中使用过滤器时如何排除 undefined 和 null?

在 Angular 中使用控制值访问器时出错

在单元测试中从ngrx存储中选择时,未定义角度.pipe和.subscribe

使用pipe和bash命令查找模式

使用pipe()和fork()复制文件内容

在MySQL和节点中使用流

Angular:如何在数组中使用groupBy Pipe

在Angular 2中使用/ deep /和>>>

何时在Angular中使用Observables和Promises

在SpringBoot和Angular中使用枚举

在Angular 5和TypeScript中使用nbind

在Angular JS中使用factory和http