首先是 Observable 和promise的区别,

  1返回值个数,Observable 可以返回0到无数个值。

  2.Promise主动推送,控制着"值"何时被 "推送 "到回调函数。

   Observable 被动,没有被订阅的时候,它就什么也不做,而且,它既可以是同步的,又可以是异步的。

import { Observable } from 'rxjs';

const foo = new Observable(subscriber => {
console.log('Hello');
subscriber.next(42);
subscriber.next(100);
subscriber.next(200);
setTimeout(() => {
subscriber.next(300); // happens asynchronously
}, 1000);
}); console.log('before');
foo.subscribe(x => {
console.log(x);
});
console.log('after'); /*结果:
"before"
"Hello"
42
100
200
"after"
300*/

操作符(operator)有两种。一种是(Pipeable Operator)对返回的数据做中间处理。不改变输入(纯函数)。它把一个 Observable 作为输入,并生成另一个 Observable 作为输出。

另外一种可以直接创建新的Observable(Creation Operator)。比如 of(1,2,3)创建一个Observable ,它将发出1,2,3,一个接着一个。

import { of } from 'rxjs';
import { map } from 'rxjs/operators'; map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`value: ${v}`));

same as
 (of(1, 2, 3)).pipe(
      map((k)=>{return k*3})
    ).subscribe((v) => console.log(`value: ${v}`));
// Logs:
// value: 1
// value: 4
// value: 9

退订(unsubscribe):

import { interval } from 'rxjs';

const observable1 = interval(400);
const observable2 = interval(300); const subscription = observable1.subscribe(x => console.log('first: ' + x));
const childSubscription = observable2.subscribe(x => console.log('second: ' + x)); subscription.add(childSubscription); setTimeout(() => {
// Unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);

//second: 0 first: 0 second: 1 first: 1 second: 2

多播(Subject)既是Observable也是Observer, 类似于eventEmitter,当一个订阅者 subscribe Subject时,它并不会执行什么,而是会将订阅者注册到订阅者列表里。(类似于addListener )

Hot Observable //即同一个流可以分发给不同的订阅者,而不是像普通cold Observable一样,不同订阅者会获得不同数据流
 

import { Subject } from 'rxjs'; const subject = new Subject<number>(); subject.subscribe({
next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
next: (v) => console.log(`observerB: ${v}`)
}); subject.next(1);
subject.next(2);

same as
  from([1, 2]).subscribe(subject);
// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2

高阶Observable :

  处理Observable的Observable

    扁平化操作符(flattening operator)

Creation Operators

Join Creation Operators

These are Observable creation operators that also have join functionality -- emitting values of multiple source Observables.

Transformation Operators

Filtering Operators

Join Operators

Also see the Join Creation Operators section above.

Multicasting Operators

Error Handling Operators

Utility Operators

Conditional and Boolean Operators

Mathematical and Aggregate Operators

rxjs笔记(未完成)的更多相关文章

  1. 莫队学习笔记(未完成QAQ

    似乎之前讲评vjudge上的这题的时候提到过?但是并没有落实(...我发现我还有好多好多没落实?vjudge上的题目还没搞,然后之前考试的题目也都还没总结?天哪我哭了QAQ 然后这三道题我都是通过一道 ...

  2. [未完成]WebService学习第一天学习笔记

    [未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记

  3. java中基本输入输出流的解释(flush方法的使用)

    转自:http://fsz521job.itpub.net/post/5606/34827 网络程序的很大一部分是简单的输入输出,即从一个系统向另一个系统移动字节.字节就是字节,在很大程度上,读服务器 ...

  4. angular2 学习笔记 ( rxjs 流 )

    RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅,  ...

  5. angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )

    Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...

  6. ReactiveX 学习笔记(28)使用 RxJS + React.js 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  7. ReactiveX 学习笔记(27)使用 RxJS + Vue.js 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  8. ReactiveX 学习笔记(26)使用 RxJS + React.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  9. ReactiveX 学习笔记(25)使用 RxJS + Vue.js 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  10. ReactiveX 学习笔记(22)使用 RxJS + Angular 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

随机推荐

  1. kubebuilder简明教程

    一.operator概述 Operator 是 Kubernetes 的扩展软件,它利用 定制资源 管理应用及其组件. Operator 遵循 Kubernetes 的理念,特别是在控制器 方面[1] ...

  2. ABAP 拼接PDF

    参考标准程序RSPO_TEST_MERGE_PDF_FILES*--合并PDF data: pdf_merger type ref to cl_rspo_pdf_merge. data: ex typ ...

  3. vue开发中,数据更新,但视图不刷新

    我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的 ...

  4. Spring Security 5 ----默认的filter都有什么用?

    我去找参考资料时,大部分只是来自于官网,但是很少分析为什么这么干,所以网络代码只停留于demo,生产级的应用却需要另外思考,不思考会有坑哦.大部分资料,合理不合理先不说,反正通了就行.本文试图去找寻, ...

  5. C - Functions again CodeForces - 789C (dp、思维)

    C - Functions again CodeForces - 789C #include<iostream> #include<cstdio> #include<cm ...

  6. elementUi-2.13.2版本添加暂无数据

    1.实现效果如下: 2. 代码实现 <el-table empty-taxt="暂无数据"></el-table> css样式设置: .el-table__ ...

  7. iOS 静态库与动态库的区别

    静态库相关命令 查看静态库架构 lipo -info ***.a 合并两个不同架构的库 lipo -create **.a  **.a -output  hecheng.a

  8. nvm安装及使用(windon/mac)

    有必要说一下nvm,因为大家做前端对node都很熟悉吧.前端的很多项目中都依赖node,还有可能每个项目依赖的node版本不一样,这样我们就上了nvm. nvm 是node Version Manag ...

  9. 面试题 --MySQL事务

    3.1 说一说你对数据库事务的了解 事务可由一条非常简单的SQL语句组成,也可以由一组复杂的SQL语句组成.在事务中的操作,要么都执行修改,要么都不执行,这就是事务的目的,也是事务模型区别于文件系统的 ...

  10. 提高NTC测温精度(转发)

    (一)一般精度要求:采样数据的获取,直接采用恒流源(或恒压源)上拉方式.见图(2)所示.  原理:将恒流源(或恒压源)直接作用于NTC热敏电阻Rt上,当被测对象的温度发生变化,NTC热敏电阻的阻值Rt ...