首先是 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. bzoj5000+的洛谷题号

    前言 闲得没事把 bzoj5000+ 在 Luogu 上可找到的题面整理了一下-- 对于我,bzoj 连账号都没有,所以肯定是不清楚 bzoj 题目总数的--因此其实就是手动翻查. 工作量很大,基本不 ...

  2. [网鼎杯2020]boom

    [网鼎杯2020]boom 分析 感觉比较友善,主要考查数学运算. 解析 解压之后发现是个exe文件,运行得到一个md5 查询: 输入明文得到: 下个挑战是解三元一次方程: 拿matlab算一下. s ...

  3. Python基础语法复习笔记(一):字符串

    python基础复习笔记 个人主页:JoJo的数据分析历险记 个人介绍:小编大四统计在读,目前保研到统计学top3高校继续攻读统计研究生 如果文章对你有帮助,欢迎关注.点赞.收藏.订阅专栏 本专栏主要 ...

  4. 狂神--Vue

    概述 前端三要素 HTML(结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容 CSS(表现) :层叠样式表(Cascading Style sh ...

  5. JVM相关总结

    https://www.cnblogs.com/jiangym/p/15885161.html JVM内存模型(JMM) 根据代码画出下面的JVM内存模型 public class Math { pu ...

  6. React.js 修改文本中数字样式

    export function numberToColor(text, color = '#635BFF', size = '12px') { let reg = /(\d+)/g; return t ...

  7. 【SSO单点系列】(8):CAS4.0 之整合CMS

    一.描术 CMS 是采用shiro来认证的: 过程 1.调用 login.do  get方式 来打开登录页面 2.录入用户名密码后调用/login.do的post来提交 并且只能是post提交 Jar ...

  8. 【转载】C++标准库容器与C#容器对比

    转载自栈他喵的又溢出了 我简单的整理一下,方便观看: C#容器 C++容器 备注 Array C array .net的Array可以是非0起始索引(鸡肋?查了一下,用Array.CreateInst ...

  9. springboot上传图片

    springboot上传图片 新建一个springboot项目: 在java/main/com/ljx 创建一个controller.fileController类 内容如下: package com ...

  10. [iOS]获取地理位置信息

    1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Descrip ...