目录
一、概述
二、详解
一、概述
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测试数据plete();
?
});
?
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测试数据plete(); // 注意不能立即调用complete函数，不然会终止消息传输
?
setTimeout( () => observer测试数据plete(), 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的详细内容...