Rxjs【Observable】

Observable创建的方式Rxjs库已经内置支持了很多操作符，所以我们只需要理解并使用即可

1、create

从任何形式创建一个Observable，静态方法，可以直接使用。

// 1. 创建Observable
const myObservable = Observable.create((observer) => {
    observer.next('Vivian');
    observer.next('Jeanne');
    setTimeout(() => {
        observer.next('====create rxjs！');
    }, 2000);
    observer.complete();
    observer.next('not work ?');
});

// 第一种写法
console.log('===1====start');
myObservable.subscribe(value => {
    console.log('1. 创建Observable: ', value);
});
console.log('===1====end');

// 第二种写法
const innerObserver = {
    next: (value) => { console.log('2. 创建Observable: ', value); },
    error: (error) => { console.log('2. 创建Observable--Error', error); },
    complete: () => { console.log('2.创建Observable: complete'); }
};
console.log('===2====start');
myObservable.subscribe(innerObserver);
console.log('===2====end');

2、of

从任意形式创建同步的Observable

const syncObservable = of('Vivian', 'Jeanne');
syncObservable.subscribe({
    next: (value) => { console.log('=====一次同步传递值: ', value); },
    error: (error) => { console.log('=====一次同步传递值--Error: ', error); },
    complete: () => { console.log('=====一次同步传递值: complete'); }
});

3、from

从已经存在的数组或者Promise、字符串、对象等创建Observable

// 第一种：来自数组的Observable
const existArray = ['Vivian', 'Jeanne', '2019'];
const existObservable = from(existArray);
existObservable.subscribe({
    next: (value) => { console.log('======从已存在的数组生成Observable: ', value); },
    error: (error) => { console.log('======从已存在的阵列生成Observable---Error: ', error); },
    complete: () => { console.log('======从已存在的数组生成Observable: complete'); }
});


// 第二种：来自Promise的Observable
const promiseObservable = from(new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Hello RXJS!');
    }, 3000);
}));
promiseObservable.subscribe({
    next: (value) => { console.log('======来自Promise的Observable: ', value); },
    error: (error) => { console.log('======来自Promise的Observable---Error: ', error); },
    complete: () => { console.log('======来自Promise的Observable: complete'); }
});

4、fromEvent

从事件（DOM事件等）创建Observable

// 第一种：FromEvent Observable 来自DOM事件
const fromEventObservable = fromEvent(document.getElementById('fromEvent'), 'click');
fromEventObservable.subscribe({
    next: (value) => { console.log('======FromEvent Observable: ', value); },
    error: (error) => { console.log('======FromEvent Observable---Error: ', error); },
    complete: () => { console.log('======FromEvent Observable: complete'); }
});


// 第二种：FromEventPattern Observable 来自类事件
const producer = new Producer();
const fromEventPatternObservable = fromEventPattern(
    (handler) => producer.addEventListener(handler),
    (handler) => producer.removeEventListener(handler)
);
fromEventPatternObservable.subscribe({
    next: (value) => { console.log('======FromEventPattern Observable: ', value); },
    error: (error) => { console.log('======FromEventPattern Observable---Error: ', error); },
    complete: () => { console.log('======FromEventPattern Observable: complete'); }
});
producer.notify('Hello! Can you hear me?');

// 自定义Observable【类事件】
class Producer {
    listener: any[];

    constructor() {
        this.listener = [];
    }

    addEventListener(listener) {
        if (typeof listener === 'function') {
            this.listener.push(listener);
        } else {
            throw new Error('listener 必须是 function!');
        }
    }

    removeEventListener(listener) {
        this.listener.splice(this.listener.indexOf(listener), 1);
    }

    notify(message) {
        this.listener.forEach(listener => {
            listener(message);
        });
    }
}

5、empty

啥也不干直接让Observable执行complete()结束，类似于数学上的0

const emptyObservable = empty();
emptyObservable.subscribe({
    next: (value) => { console.log('======empty Observable: ', value); },
    error: (error) => { console.log('======empty Observable---Error: ', error); },
    complete: () => { console.log('======empty Observable: complete'); }
});

6、never

永远也不会执行complete()结束的Observable，类似于数学上的无穷大∞

const neverObservable = never();
neverObservable.subscribe({
    next: (value) => { console.log('======never Observable: ', value); },
    error: (error) => { console.log('======never Observable---Error: ', error); },
    complete: () => { console.log('======never Observable: complete'); }
});

7、interval

定时器，每隔一定时间送出一个元素

const intervalObservable = interval(1000);
intervalObservable.subscribe({
    next: (value) => { console.log('======interval Observable: ', value); },
    error: (error) => { console.log('======interval Observable---Error: ', error); },
    complete: () => { console.log('======interval Observable: complete'); }
});

8、timer

延时定时器

// timer Observable延时定时器
const timerObservable = timer(1000, 5000);
timerObservable.subscribe({
    next: (value) => { console.log('======timer Observable延时定时器: ', value); },
    error: (error) => { console.log('======timer Observable延时定时器---Error: ', error); },
    complete: () => { console.log('======timer Observable延时定时器: complete'); }
});

// timer Observable延时定时器【指定日期之后开始执行】
const timerFromDateObservable = timer(new Date('2019-05-26 23:22:00'));
timerFromDateObservable.subscribe({
    next: (value) => { console.log('======timer Observable延时定时器【指定日期之后开始执行】: ', value); },
    error: (error) => { console.log('======timer Observable延时定时器【指定日期之后开始执行】---Error: ', error); },
    complete: () => { console.log('======timer Observable延时定时器【指定日期之后开始执行】: complete'); }
});

// timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅
const onceTimerObservable = timer(3000);
onceTimerObservable.subscribe({
    next: (value) => { console.log('======timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅: ', value); },
    error: (error) => { console.log('======timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅---Error: ', error); },
    complete: () => { console.log('======timer Observable延时定时器, 延迟毫秒执行一次之后取消订阅: complete'); }
});

---

Marble Diagrams【宝珠图】

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

Marble Diagrams【宝珠图】

Angular Rxjs Series

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