ES7 中的 Observable 是一种全新的数据流管理神器，它可以帮助开发者轻松管理和处理各种复杂的异步数据流。本文将从什么是 Observable 开始，逐步介绍关于 Observable 的深度内容，并提供一些示例代码来帮助读者更好地理解和使用 Observable。
什么是 Observable
Observable 是一个异步数据流管理对象，它可以用来处理数据流并监测其中的变化。它通常用于处理与 UI 输入/输出相关的数据流，如键盘输入、鼠标点击、窗口滚动等。它也可以用来处理多个异步请求的数据流。
Observable 本质上是一个对象，它通常具有以下几个特点：
- 可以观察数据流中的变化，并在变化时通知观察者。
- 可以处理同步和异步事件，包括但不限于 Promise、setTimeout、XMLHttpRequest 等。
- 可以用来组合和转换多个数据流。
- 可以被取消订阅。
Observable 的核心方法包括 subscribe() 和 unsubscribe()，其中 subscribe() 用于订阅数据流并返回一个取消订阅的函数，unsubscribe() 用于取消订阅数据流。
Observable 的基本用法
使用 Observable 一般需要先引用 RxJS 这个库，然后就可以创建一个 Observable 对象，如下所示：
import { Observable } from 'rxjs';
const observable = new Observable((observer) => {
observer.next('Hello');
observer.next('World');
observer.complete();
});上面这个例子创建了一个 Observable 对象，并在其中发送了两个值 'Hello' 和 'World'，然后在发送完值后调用了 complete() 方法来通知观察者数据流已经结束。
一旦创建了一个 Observable 对象，我们就可以调用 subscribe() 方法来订阅它：
const subscription = observable.subscribe({
next: (value) => console.log(value),
error: (err) => console.error(err),
complete: () => console.log('Complete!')
});这个例子中，我们调用了 subscribe() 方法，并传入了一个观察者对象，该对象有三个方法：next()、error() 和 complete()，分别用于处理观察者接收到新值、出现错误以及接收到完成通知时的操作。
最后，我们可以调用 unsubscribe() 方法来取消订阅数据流：
subscription.unsubscribe();
这个例子展示了 Observable 的基本用法，接下来我们将继续深入探讨 Observable 更复杂的用法。
Observable 的高级用法
操作符
Observable 有许多强大的操作符，可以用来进行数据变换和流的组合。这些操作符包括 map()、filter()、merge()、combineLatest()、concat() 等。接下来让我们来看两个例子，可以帮助读者更好地理解这些操作符的使用方法：
map()
// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
const input = document.querySelector('input');
const output = document.querySelector('output');
fromEvent(input, 'input')
.pipe(map((event) => event.target.value))
.subscribe((value) => output.textContent = value);这个例子使用了 map() 操作符，用于将输入框中的值映射到输出框上。在这个例子中，我们使用了 fromEvent() 方法来创建一个 Observable 对象，它会在输入框的输入事件中发送值。然后使用 map() 操作符对这些值进行处理，最后使用 subscribe() 方法来订阅数据流并将值输出到文本框中。
combineLatest()
// javascriptcn.com 代码示例
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
const output = document.querySelector('#output');
const input1$ = fromEvent(input1, 'input').pipe(map((event) => event.target.value));
const input2$ = fromEvent(input2, 'input').pipe(map((event) => event.target.value));
combineLatest(
input1$,
input2$
).subscribe(([input1, input2]) => {
output.textContent = `${input1} ${input2}`;
});这个例子使用了 combineLatest() 操作符，用于合并两个 Observable ，并在其中一个 Observable 发生变化时更新文本框中的值。在这个例子中，我们使用了 fromEvent() 方法来创建两个 Observable 对象，分别用于处理输入框1和2中的输入事件。然后使用 combineLatest() 方法将这两个 Observable 合并起来，并在其任意一个发生变化时刷新文本框中的值。
Subject
Subject 是一个特殊类型的 Observable，它允许在数据流的任何时刻发送新值，并将其推送给所有已订阅的观察者。这使得 Subject 成为一种中央数据源，可以用于在组件之间共享数据。
// javascriptcn.com 代码示例
import { Subject } from 'rxjs';
const subject = new Subject();
// 订阅 subject
subject.subscribe({
next: (value) => console.log(value),
error: (err) => console.error(err),
complete: () => console.log('Complete!')
});
// 发送新值
subject.next('Hello');
subject.next('World');
subject.complete();在这个例子中，我们创建了一个 Subject 对象，并使用 subscribe() 方法进行订阅。然后使用 next() 方法来发送两个新值，并在最后使用 complete() 方法通知观察者数据流已经结束。
BehaviorSubject
BehaviorSubject 是一个特殊类型的 Subject，它会在有新的观察者订阅时，自动将最新的值发送给新订阅的观察者。这使得 BehaviorSubject 成为一种方便的数据源，可以用于在组件之间共享全局状态。
// javascriptcn.com 代码示例
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject('Hello');
// 订阅 subject
subject.subscribe({
next: (value) => console.log(value),
error: (err) => console.error(err),
complete: () => console.log('Complete!')
});
// 发送新值
subject.next('World');
subject.complete();在这个例子中，我们创建了一个 BehaviorSubject 对象，并使用 subscribe() 方法进行订阅。然后使用 next() 方法来发送一个新值，并在最后使用 complete() 方法通知观察者数据流已经结束。另外，需要注意的是，在 BehaviorSubject 对象创建时，需要传入一个初始值。
总结
Observable 是一个非常强大的异步数据流管理对象，它具有强大的操作符和丰富的 API，可以帮助开发者轻松处理各种复杂的异步数据流。在使用 Observable 时，需要注意订阅和取消订阅数据流，并掌握好各种操作符的使用方法。在实际的开发过程中，Observable 可以用来处理多种不同类型的数据流，如用户输入、网络请求、状态管理等，是一种非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653672197d4982a6ebe8350e