首先是 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. 理论+实战,详解Sharding Sphere-jdbc

    摘要:Apache ShardingSphere 是一款分布式的数据库生态系统,它包含两大产品:ShardingSphere-Proxy和ShardingSphere-JDBC. 本文分享自华为云社区 ...

  2. 微软出品自动化神器【Playwright+Java】系列(十)元素定位详解

    一.写在前面 又有很久没更文了,真的是被催婚搞的整个人情绪特别不好,如果硬要形容的话,那就是没法跟人正常沟通,一点就着,做什么都没耐心,看什么都烦,简直没救了... 也是偶然发现的,自己居然没写关于P ...

  3. Ubuntu离线安装 MySQL 5.7

    来源:https://www.ngui.cc/article/show-581968.html?action=onClick 一.所需环境 操作系统:Ubuntu 20.04数据库:MySQL 5.7 ...

  4. ROS librviz库

    1.可视化管理类:rviz::VisualizationManager The VisualizationManager class is the central manager class of r ...

  5. 【C学习笔记】day3-2 计算1/1-1/2+1/3-1/4+1/5 …… + 1/99 - 1/100 的值。

    #include <stdio.h> int main() { double sum = 0; double j = 1.0; for (int i = 1; i <= 100; i ...

  6. conda创建和启动python虚拟环境

    conda与python虚拟环境 创建环境 conda create -n ENV_NAME python=3.9 激活环境 conda activate ENV_NAME 给虚拟环境安装包: con ...

  7. Vuex 部分

    Vuex 部分 官网链接 https://vuex.vuejs.org/zh/ 先说一下vuex到底是什么? vuex 是一个专门为vue.js应用程序开发的状态管理模式. 这个状态我们可以理解为在d ...

  8. python使用pysimplegui简单制作一个exe程序

    一.安装打包程序 控制台输入: pip install pysimplegui-exemaker -- 安装exe制作库 pip install PySimpleGUI -- 安装图形化界面编辑库 二 ...

  9. docker部署rocketmq

    docker pull foxiswho/rocketmq:server-4.7.0  (拉取镜像) docker pull foxiswho/rocketmq:broker-4.7.0 (拉取镜像) ...

  10. 【Frida】启动手机上的Frida插件

    运行以下命令可以保证Frida一直在手机上运行,不关机,Frida就不关 adb shell su -c "./data/local/frida-server-15.2.2-android- ...