Rxjs学习笔记

Rxjs–Observable

Creating Observables

Observable 构造函数中携带了一个参数： 函数subscribe

下面的例子中 观察对象为订阅者每秒钟发送一个’hi‘

import {Observable} form 'rxjs'
const observable = new Observable(function subscribe(subscriber) {
    const id = setInterval() => {
        subscriber.next('hi');
    }
},1000);

new Observable()可以创建一个观察对象 观察对象可以使用很多方法：OF FROM ETC

Subscribing to Observables

下面是一个订阅的例子

observable.subscribe((x) => console.log(x));

observable.subscribe 和newObservable中的subscribe并不是一个东西，但是出于实际目的，可以理解为相同的

当observable.subscribe被调用时，会执行newObservable中的subscribe将结果提供给订阅者，订阅 Observable 就像调用一个函数，提供数据将被传递到的回调。

订阅与addEventListener / removeEventListener 等事件处理程序 API 完全不同， 使用 observable.subscribe 时，给定的 Observer 不会在 Observable 中注册为侦听器。 Observable 甚至不维护附加的观察者列表。

订阅调用只是一种启动“可观察执行”并将值或事件传递给该执行的观察者的方法。

Executing Observables

下图标红的地方就是observable的执行体，他是一个惰性计算，只有在observable.subscribe时候才会被调用，执行体可以产出多个值，异步同步不限

observable提供三种类型的值

"Next" : sends a value such as a Number, a String, an Object, etc.

"Error" : sends a JavaScript Error or exception.

"Complete" : does not send a value

在 Observable Execution 中，可以传递零到无限的 Next 通知。 如果发送了 Error 或 Complete 通知，则此后无法发送任何其他通知。

使用 try/catch 块在 subscribe 中包装任何代码是一个好主意，如果它捕获异常，它将传递错误通知：

const observable = new Observable (subscriber => {
    try {
        subscriber.next(1);
    } catch(err) {
        subscribe.error(err);
    }
});

Disposing Observable Executions

因为 Observable Executions 可能是无限的，并且 Observer 想要在有限的时间内中止执行是很常见的，我们需要一个 API 来取消执行。 由于每次执行只对一个观察者独占，一旦观察者完成接收值，它必须有办法停止执行，以避免浪费计算能力或内存资源。

当 observable.subscribe 被调用时，Observer 被附加到新创建的 Observable 执行。 此调用还返回一个对象，即订阅：

const subscription = observable.subscribe(x => console.log(x));

订阅代表正在进行的执行，并有一个最小的 API 允许您取消该执行。 在此处阅读有关订阅类型的更多信息。 使用 subscription.unsubscribe() 您可以取消正在进行的执行：

import { from } from 'rxjs'
const observable = from([10,20,30]);
const subscription = observale.subscribe(x => console.log(x));
subscription.unscribe();

当我们使用 create() 创建 Observable 时，每个 Observable 必须定义如何处置该执行的资源。 您可以通过从函数 subscribe() 中返回自定义取消订阅函数来实现。

就像 observable.subscribe 类似于 new Observable(function subscribe() {…}) 一样，我们从 subscribe 返回的取消订阅在概念上等同于 subscription.unsubscribe。 事实上，如果我们移除围绕这些概念的 ReactiveX 类型，我们就会得到相当简单的 JavaScript。

function subscribe(subscriber) {
  const intervalId = setInterval(() => {
    subscriber.next('hi');
  }, 1000);

  return function unsubscribe() {
    console.log('结束了');
    clearInterval(intervalId);
  };
}


const unsubscribe = subscribe({next: (x) => console.log(x)});


unsubscribe(); 

Rxjs–Observer

Observer就是Observables所传递对象的消费者

const observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

要使用观察者就要将他提供给Observable的订阅，

observable.subscribe(observer);

Observers 只是具有三个回调的对象，一个用于 Observable 可能传递的每种类型的通知。 next、error、complete observer可以只包含其中的一部分，如果没有表明是哪一部分默认为next

RxJS Operators
rxjs operator有两种 一个是Pipeable Operators用于做数据处理，一个是create operator 用于创建具有一些常见预定义行为的 Observable 或通过加入其他 Observable 的函数。
Pipeable Operators 是一种可以使用 observableInstance.pipe(operator()) 语法通过管道传输到 Observables 的操作符。 其中包括 filter(…) 和 mergeMap(…)。 调用时，它们不会更改现有的 Observable 实例。 相反，它们返回一个新的 Observable，其订阅逻辑基于第一个 Observable。

mergeAll() — 在每个内部 Observable 到达时订阅它，然后在它到达时发出每个值
switchAll() — 当第一个内部 Observable 到达时订阅它，并在它到达时发出每个值，但是当下一个内部 Observable 到达时，取消订阅前一个，并订阅新的。
Exhaust() — 当第一个内部 Observable 到达时订阅它，并在它到达时发出每个值，丢弃所有新到达的内部 Observable，直到第一个完成，然后等待下一个内部 Observable。 正如许多数组库将 map() 和 flat()（或 flatten()）组合成一个 flatMap() 一样，所有 RxJS 扁平化操作符 concatMap()、mergeMap()、switchMap() 和exhaustMap 都有映射等价物 ()。

Creation Operators 累了只看了几个常用的额

ajax
bindCallback
bindNodeCallback
defer
empty
from   传入数组、类似数组的对象、Promise、可迭代对象或类似 Observable 的对象来创建一个 Observable。 
fromEvent
fromEventPattern
generate
interval
of   将参数转换为可观察的序列，传入的是一个数组
range
throwError
timer
iif

Subject

subject是一个特殊的Observable，与普通的区别就是普通是单播，他是多播，类似与EventEmitters。
每个 Subject 都是一个 Observable。 给定一个subject，您可以订阅它，提供一个观察者，它将开始正常接收值。

从观察者的角度来看，它无法判断 Observable 的执行是来自一个普通的单播 Observable 还是一个 Subject。

在subject内部，订阅不会调用传递值的新执行。它只是在一个观察者列表中注册给定的观察者，类似于 addListener 通常在其他库和语言中的工作方式。

每个subject都是观察者。 它是一个具有 next(v)、error(e) 和 complete() 方法的对象。

要向 Subject 提供一个新值，只需调用 next(theValue)，它就会被多播给注册监听 Subject 的观察者。

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