首先是 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. LeetCode-2043 两数相加题解

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/simple-bank-system 题目描述 你的任务是为一个很受欢迎的银行设计一款程序,以自动 ...

  2. Spring整合Mybatis原理

    Spring整合Mybatis原理 目录 Spring整合Mybatis原理 1.@MapperScan注解发挥作用 1.1.导入MapperScannerRegistrar类 1.1.2.执行Imp ...

  3. Visual Studio 2022 不支持 .NET Framework 老版本 项目解决办法

    Visual Studio 2022 不支持 .NET Framework老版本 (4.5) 项目解决办法 新电脑安装的是Visual Studio 2022,打开老项目的时候发现没有.net fra ...

  4. vue3学习

    资料: http://docs.vikingship.xyz/ 声明类型:      1.使用ref可以声明基础数据 2.使用reactive声明对象数据 3.computed可以返回一个不变的响应式 ...

  5. FMC子卡设计资料原理图:FMC177-基于AD9361的双收双发射频FMC子卡

    FMC177-基于AD9361的双收双发射频FMC子卡 一.板卡介绍 FMC177射频模块分别包含两个接收通道与发射通道,其频率可覆盖达到70MHz~6GHz,AD9361芯片提供具有成本效益的实验平 ...

  6. C# 调用Web Api通用方法

    1.通用方法 public class GetDataByWebApi { /// <summary> /// 通过web api获取数据的方法 /// </summary> ...

  7. 查看nohup.out 日志文件

    1.查看实时日志: tail -f nohup.out 2.查看实时日志并检索关键字: tail -f nohup.out | grep "关键字" 3.查看文件最后100行日志: ...

  8. vue路由跳转当前路由刷新

    在app.vue里面定义 reload() {         this.isRouterAlive = false         this.$nextTick(function () {      ...

  9. TCP和UDP协议之间的区别与原理

    一.TCP和UDP协议之间的区别 TCP是基于连接的,而UDP是基于非连接的. TCP传输数据稳定可靠,适用于对网络通讯质量要求较高的场景,需要准确无误的传输给对方,比如,传输文件,发送邮件,浏览网页 ...

  10. TM1621断码液晶驱动IC的原理、驱动代码

    TM1621是一个多功能的LCD驱动器,带有蜂鸣器驱动功能.通讯采用四线串行接口 TM1621的难点在于字节序和显存跟屏幕的映射关系上,下面是写寄存器的代码 void Delay_us(uint8_t ...