目录
一、概述
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));
-
}