在前端的开发过程中，处理异步数据是非常常见的需求，而 RxJS 是一个非常优秀的解决方案，它提供了一系列的操作符和工具来处理各类异步数据。在 RxJS 中，Observable 可以被认为是数据流，它是一个非常重要的概念，了解 Observable 的创建方式是使用 RxJS 的关键。
本文将介绍 RxJS 中常见的 Observable 创建方式及其特点，希望能够帮助大家更好地理解 RxJS 的使用方法。
基于数据创建 Observable
在 RxJS 中，最简单的创建 Observable 的方式是将一个数据转换成 Observable，这可以通过 of 和 from 操作符来实现，它们的作用分别是将一个数组、一个迭代器对象、一个 Promise 对象，或者一段类数组的数据转换成 Observable。
of 操作符
of 操作符可以将多个数据转换成 Observable，并且按顺序订阅，然后将这些数据推送给订阅者。它的语法如下：
of(...values: any[]): Observable
示例如下：
import { of } from 'rxjs'; const source$ = of(1, 2, 3); source$.subscribe(value => console.log(value));
输出结果为：
1 2 3
from 操作符
from 操作符可以将一个数组、一个迭代器对象、一个 Promise 对象，或者一段类数组的数据转换成 Observable，并且按顺序订阅，然后将它们推送给订阅者。它的语法如下：
from( input: | ArrayLike<T> | Iterable<T> | ObservableInput<T> | PromiseLike<T> ): Observable<T>
示例如下：
import { from } from 'rxjs'; const sourceArray$ = from([1, 2, 3]); sourceArray$.subscribe(value => console.log(value)); const sourceString$ = from('hello'); sourceString$.subscribe(value => console.log(value));
输出结果为：
1 2 3 h e l l o
基于事件创建 Observable
除了基于数据创建 Observable 之外，我们还可以基于事件来创建 Observable。在 RxJS 中，我们可以使用 fromEvent 和 interval 操作符来创建不同类型的事件 Observable。
fromEvent 操作符
fromEvent 操作符可以将事件转换成 Observable，事件可以是 DOM 事件，也可以是 Node.js 中的事件。它的语法如下：
fromEvent( target: EventTargetLike, eventName: string, options?: EventListenerOptions | ((...args: any[]) => T), resultSelector?: (...args: any[]) => T ): Observable
target 是事件源，eventName 是事件名称。
示例如下：
<button id="btn">Click me</button>
import { fromEvent } from 'rxjs'; const btn = document.getElementById('btn'); const btn$ = fromEvent(btn, 'click'); btn$.subscribe(event => console.log('button clicked!'));
interval 操作符
interval 操作符可以定时发出数字序列，可以用于实现定时器功能。它的语法如下：
interval(period: number): Observable
period 是定时间隔的毫秒数。
示例如下：
import { interval } from 'rxjs'; const source$ = interval(1000); source$.subscribe(value => console.log(value));
输出结果为：
0 1 2 ...
基于函数创建 Observable
除了基于数据和事件创建 Observable 之外，我们还可以使用 create 操作符来基于函数来创建 Observable。使用 create 操作符可以更加灵活地控制 Observable 推送数据的时机和频率。
create 操作符
create 操作符接受一个 subscribe 函数作为参数，其中 subscribe 函数又接受一个观察者对象作为参数。在 subscribe 函数中，我们可以手动调用观察者对象的 next、error、和 complete 方法，来向订阅者推送数据。
示例如下：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ------- - --- ------------------- -- - ----------------- ----------------- ----------------- -------------------- --- ------------------- ----- ----- -- ------------------- --------- -- -- ----------------------- ---展开代码
输出结果为：
1 2 3 complete
总结
本文介绍了 RxJS 中常见的 Observable 创建方式，这些方式包括基于数据、事件、和函数创建。通过对 Observable 创建方式的理解，我们可以更加灵活地使用 RxJS 来处理各种异步数据，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6645b9bed3423812e43c0a31
