0%

Rxjs【Observable】

发表于 更新于
本文字数： 6.1k 阅读时长 ≈ 6 分钟 
Observable创建的方式Rxjs库已经内置支持了很多操作符，所以我们只需要理解并使用即可

1、create

从任何形式创建一个Observable，静态方法，可以直接使用。
1
// 1. 创建Observable
2
const myObservable = Observable.create((observer) => {
3
    observer.next('Vivian');
4
    observer.next('Jeanne');
5
    setTimeout(() => {
6
        observer.next('====create rxjs！');
7
    }, 2000);
8
    observer.complete();
9
    observer.next('not work ?');
10
});
11
12
// 第一种写法
13
console.log('===1====start');
14
myObservable.subscribe(value => {
15
    console.log('1. 创建Observable: ', value);
16
});
17
console.log('===1====end');
18
19
// 第二种写法
20
const innerObserver = {
21
    next: (value) => { console.log('2. 创建Observable: ', value); },
22
    error: (error) => { console.log('2. 创建Observable--Error', error); },
23
    complete: () => { console.log('2.创建Observable: complete'); }
24
};
25
console.log('===2====start');
26
myObservable.subscribe(innerObserver);
27
console.log('===2====end');

2、of

从任意形式创建同步的Observable
1
const syncObservable = of('Vivian', 'Jeanne');
2
syncObservable.subscribe({
3
    next: (value) => { console.log('=====一次同步传递值: ', value); },
4
    error: (error) => { console.log('=====一次同步传递值--Error: ', error); },
5
    complete: () => { console.log('=====一次同步传递值: complete'); }
6
});

3、from

从已经存在的数组或者Promise、字符串、对象等创建Observable
1
// 第一种：来自数组的Observable
2
const existArray = ['Vivian', 'Jeanne', '2019'];
3
const existObservable = from(existArray);
4
existObservable.subscribe({
5
    next: (value) => { console.log('======从已存在的数组生成Observable: ', value); },
6
    error: (error) => { console.log('======从已存在的阵列生成Observable---Error: ', error); },
7
    complete: () => { console.log('======从已存在的数组生成Observable: complete'); }
8
});
9
10
11
// 第二种：来自Promise的Observable
12
const promiseObservable = from(new Promise((resolve, reject) => {
13
    setTimeout(() => {
14
        resolve('Hello RXJS!');
15
    }, 3000);
16
}));
17
promiseObservable.subscribe({
18
    next: (value) => { console.log('======来自Promise的Observable: ', value); },
19
    error: (error) => { console.log('======来自Promise的Observable---Error: ', error); },
20
    complete: () => { console.log('======来自Promise的Observable: complete'); }
21
});

4、fromEvent

从事件（DOM事件等）创建Observable
1
// 第一种：FromEvent Observable 来自DOM事件
2
const fromEventObservable = fromEvent(document.getElementById('fromEvent'), 'click');
3
fromEventObservable.subscribe({
4
    next: (value) => { console.log('======FromEvent Observable: ', value); },
5
    error: (error) => { console.log('======FromEvent Observable---Error: ', error); },
6
    complete: () => { console.log('======FromEvent Observable: complete'); }
7
});
8
9
10
// 第二种：FromEventPattern Observable 来自类事件
11
const producer = new Producer();
12
const fromEventPatternObservable = fromEventPattern(
13
    (handler) => producer.addEventListener(handler),
14
    (handler) => producer.removeEventListener(handler)
15
);
16
fromEventPatternObservable.subscribe({
17
    next: (value) => { console.log('======FromEventPattern Observable: ', value); },
18
    error: (error) => { console.log('======FromEventPattern Observable---Error: ', error); },
19
    complete: () => { console.log('======FromEventPattern Observable: complete'); }
20
});
21
producer.notify('Hello! Can you hear me?');
22
23
// 自定义Observable【类事件】
24
class Producer {
25
    listener: any[];
26
27
    constructor() {
28
        this.listener = [];
29
    }
30
31
    addEventListener(listener) {
32
        if (typeof listener === 'function') {
33
            this.listener.push(listener);
34
        } else {
35
            throw new Error('listener 必须是 function!');
36
        }
37
    }
38
39
    removeEventListener(listener) {
40
        this.listener.splice(this.listener.indexOf(listener), 1);
41
    }
42
43
    notify(message) {
44
        this.listener.forEach(listener => {
45
            listener(message);
46
        });
47
    }
48
}

5、empty

啥也不干直接让Observable执行complete()结束，类似于数学上的0
1
const emptyObservable = empty();
2
emptyObservable.subscribe({
3
    next: (value) => { console.log('======empty Observable: ', value); },
4
    error: (error) => { console.log('======empty Observable---Error: ', error); },
5
    complete: () => { console.log('======empty Observable: complete'); }
6
});

6、never

永远也不会执行complete()结束的Observable，类似于数学上的无穷大∞
1
const neverObservable = never();
2
neverObservable.subscribe({
3
    next: (value) => { console.log('======never Observable: ', value); },
4
    error: (error) => { console.log('======never Observable---Error: ', error); },
5
    complete: () => { console.log('======never Observable: complete'); }
6
});

7、interval

定时器，每隔一定时间送出一个元素
1
const intervalObservable = interval(1000);
2
intervalObservable.subscribe({
3
    next: (value) => { console.log('======interval Observable: ', value); },
4
    error: (error) => { console.log('======interval Observable---Error: ', error); },
5
    complete: () => { console.log('======interval Observable: complete'); }
6
});

8、timer

延时定时器
1
// timer Observable延时定时器
2
const timerObservable = timer(1000, 5000);
3
timerObservable.subscribe({
4
    next: (value) => { console.log('======timer Observable延时定时器: ', value); },
5
    error: (error) => { console.log('======timer Observable延时定时器---Error: ', error); },
6
    complete: () => { console.log('======timer Observable延时定时器: complete'); }
7
});
8
9
// timer Observable延时定时器【指定日期之后开始执行】
10
const timerFromDateObservable = timer(new Date('2019-05-26 23:22:00'));
11
timerFromDateObservable.subscribe({
12
    next: (value) => { console.log('======timer Observable延时定时器【指定日期之后开始执行】: ', value); },
13
    error: (error) => { console.log('======timer Observable延时定时器【指定日期之后开始执行】---Error: ', error); },
14
    complete: () => { console.log('======timer Observable延时定时器【指定日期之后开始执行】: complete'); }
15
});
16
17
// timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅
18
const onceTimerObservable = timer(3000);
19
onceTimerObservable.subscribe({
20
    next: (value) => { console.log('======timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅: ', value); },
21
    error: (error) => { console.log('======timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅---Error: ', error); },
22
    complete: () => { console.log('======timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅: complete'); }
23
});

Marble Diagrams【宝珠图】

1. 这个Marble Diagrams【宝珠图】可以很灵活的表现出每个操作符的使用
2. 下面是超链接传送门

Marble Diagrams【宝珠图】

Angular Rxjs Series

  1. Rxjs6都改变了些什么？
  2. Rxjs【map、mapTo、filter】
  3. Rxjs【take, first, takeUntil, concatAll】