目录
一、概述
二、详解
一、概述
Observable翻译为可观察对象，是RxJS中的一个对象，可以用来处理异步事件，例如http请求。实际上，在Angular中，所有的http请求返回的都是Observable。Observable和promise本质上是相同的，都是生产者主动向消费者push产品，而消费者被动接收。但两者也有很大区别，Observable可以发送任意多值，并且在被订阅钱，它是不会执行的，这是promise不具备的特点。
Observable用于在发送方和接收方之间传输消息，可以将这些消息看作流。
在创建Observable对象时，需要传入一个函数作为构造函数的参数，这个函数叫订阅者函数，是生产者向消费者推送消息的地方。在被消费者subscribe（订阅）之前，订阅者函数不会执行，直到subscribe()函数被调用，该函数返回一个subscription对象，里面有一个unsubscribe()函数，消费者可以随时拒绝消息的接收。
subscribe()函数接收一个observer（观察者）对象作为入参。
消息的发送可以是同步的，也可以是异步的。
我们可以使用一系列的RxJS操作符，在这些消息被接收方接收之前，对它进行一些列的处理、转换，因为这些操作符都是纯函数，没有副作用，可以放心使用，并不会产生期望之外的效果。
二、详解
observer观察者
observer为观察者，可以观察Observable对象。observer是一个对象，里面包含三个属性，分别是next、error和complete，它们都是函数。
( 1) next： 以接收的值作为入参, 在正常情况下执行, 可选
( 2) error： 出错的情况下执行, 可选
( 3) complete： 传输完成的情况下执行, 可选
Observable被观察者
实例
通过RxJS库中的of方法创建一个Observable对象，代码如下所示。
onClick() {
let observable = of( 1, 2, 3);
observable.subscribe({ next: num => console.log(num) });
// 控制台分别输出：1 2 3
}
解析
RxJS中的of方法用于创建一个Observable，它会将其参数一个一个的分别发送给接收方。
subscribe函数接收一个Observable对象，但这里，只定义了next方法，可以发现next方法接收一个参数，这个参数就是生产者发送过来的值，然后将其打印在控制台上。
订阅者函数
实例
onClick2() {
const observable = Observable.create( observer => {
try {
observer.next( 1);
observer.next( 2);
observer.next( 3);
} catch (e) {
observer.error(e);
}
observer.complete();
});
const observer = {
next: num => console.log(num),
error: e => console.log(e),
complete: () => console.log( 'complete!!!')
}
observable.subscribe(observer); // 控制台分别输出：1 2 3 complete!!!
}
解析
以上代码效果与用of创建的Observable是一样的，of函数的源码就是类似这种结构。
subscribe订阅
在被消费者subscribe（订阅）之前，订阅者函数不会执行，直到subscribe()函数被调用，该函数返回一个subscription对象。里面有一个unsubscribe()函数，消费者可以随时拒绝消息的接收。也就是说，在Observable调用subscribe函数之前，什么也不会发生，就像下面这段代码，控制台什么输出内容都没有。
onClick() {
let observable = of( 1, 2, 3);
}
订阅observable对象，如下代码所示。
onClick() {
let observable = of( 1, 2, 3);
observable.subscribe({ next: num => console.log(num) });
// 控制台分别输出：1 2 3
}
异步发送消息
以上代码中生产者发送消息的方式都是同步。如下代码所示，异步发送消息。
onClick3() {
const observable = Observable.create( observer => {
try {
let time = 0;
observer.next( 1);
observer.next( 2);
observer.next( 3);
const intervalId = setInterval( () => {
console.log( `wait ${++time}s`);
}, 900)
setTimeout( () => {
observer.next( 4);
clearInterval(intervalId)
}, 2000);
} catch (e) {
observer.error(e);
}
// observer.complete(); // 注意不能立即调用complete函数，不然会终止消息传输
setTimeout( () => observer.complete(), 3000)
});
const observer = {
next: num => console.log(num),
error: e => console.log(e),
complete: () => console.log( 'complete!!!')
}
observable.subscribe(observer);
}
unsubscribe函数
调用subscribe函数，返回一个subscription对象，里面有一个unsubscribe()函数，用于取消订阅。
实例
onClick4() {
const obs = Observable.create( observer => {
observer.next( 1);
setTimeout( () => observer.next( 2), 2000); // 等待两秒才发送下一个值
});
let suber = obs.subscribe({
next: x => console.log( "接收到：", x)
});
setTimeout( () => suber.unsubscribe(), 1000); // 在一秒后取消订阅
}
解析
运行代码，最终只打印了数字1，因为数字2在两秒后才会发送，而消费者在1秒后就中断了消息传输。
自定义subscribe函数
Observable的subscribe函数返回一个subscription对象，该对象有一个unsubscribe函数，用于取消订阅。
实例
如下代码所示，使用函数模拟订阅。模拟了Observable的subscribe函数的内部实现（仅仅是模拟而已）。
onClick5() {
function subscribe( observer) {
var intervalID = setInterval( () => {
observer.next( 'launch.....');
}, 1000);
return {
unsubscribe: () => clearInterval(intervalID)
}
}
var subscription = subscribe({ next: ( x) => console.log(x) });
setTimeout( () => subscription.unsubscribe(), 5000);
}
RxJS的map操作符
map操作符可以接收可观察者对象发送的值，将其转换成另外的形式，并以一个新的可观察对象发送这些新值。
实例
如下代码所示，将原来可观察对象发送的值全部转换为hello world，并订阅map操作符返回的新的可观察对象。
import { map } from 'rxjs/operators';
onClick3() {
const observable = of( 1, 2, 3);
const opt = map( num => 'hello');
const newObservable = opt(observable);
newObservable.subscribe( data => console.log(data));
// 控制台分别输出：hello hello hello
}
解析
可以发现map操作符将123转换成了三个hello，并输出到控制台上，这种方式代码结构并不是很清晰，并不推荐这种写法。
pipe管道、tap操作符
pipe管道可以将多个操作符连接起来，并将操作符返回的结果组合成一个，这样代码结构更清晰。
tap操作符可以理解为窥探，就是不打扰可观察对象发送的值，但又可以取得这些值进行处理。
onClick3() {
const observable = of( 1, 2, 3);
const newObservable = observable.pipe(
tap( num => console.log(num)),
map( num => 'hello world')
);
newObservable.subscribe( data => console.log(data));
}
查看更多关于【转】Angular—RxJS之Observable的详细内容...