rxjs笔记（未完成）

首先是 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）

• concatAll() 
• mergeAll() 
• switchAll()
• exhaust()
• flatMap()
• concatMap()
• mergeMap()
•  switchMap()
• exhaustMap().

Creation Operators

• ajax
• bindCallback
• bindNodeCallback
• defer
• empty
• from
• fromEvent
• fromEventPattern
• generate
• interval
• of
• range
• throwError
• timer
• iif

Join Creation Operators

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

• combineLatest
• concat
• forkJoin
• merge
• race
• zip

Transformation Operators

• buffer
• bufferCount
• bufferTime
• bufferToggle
• bufferWhen
• concatMap
• concatMapTo
• exhaust
• exhaustMap
• expand
• groupBy
• map
• mapTo
• mergeMap
• mergeMapTo
• mergeScan
• pairwise
• partition
• pluck
• scan
• switchMap
• switchMapTo
• window
• windowCount
• windowTime
• windowToggle
• windowWhen

Filtering Operators

• audit
• auditTime
• debounce
• debounceTime
• distinct
• distinctKey
• distinctUntilChanged
• distinctUntilKeyChanged
• elementAt
• filter
• first
• ignoreElements
• last
• sample
• sampleTime
• single
• skip
• skipLast
• skipUntil
• skipWhile
• take
• takeLast
• takeUntil
• takeWhile
• throttle
• throttleTime

Join Operators

Also see the Join Creation Operators section above.

• combineAll
• concatAll
• exhaust
• mergeAll
• startWith
• withLatestFrom

Multicasting Operators

• multicast
• publish
• publishBehavior
• publishLast
• publishReplay
• share

Error Handling Operators

• catchError
• retry
• retryWhen

Utility Operators

• tap
• delay
• delayWhen
• dematerialize
• materialize
• observeOn
• subscribeOn
• timeInterval
• timestamp
• timeout
• timeoutWith
• toArray

Conditional and Boolean Operators

• defaultIfEmpty
• every
• find
• findIndex
• isEmpty

Mathematical and Aggregate Operators

• count
• max
• min
• reduce