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）

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

 

posted @ 2020-04-01 20:54  Esther_Cheung  阅读(143)  评论(0)    收藏  举报