前言
Angular 是 Google 推出的一款 Web 前端框架，它以模块、组件、服务等为基础的开发体验，成为了现代 Web 开发的首选工具之一。而可观察者和 RxJS 则是 Angular 中的核心概念，全称 Observable 和 Reactive Extensions for JavaScript，RxJS 中的 operators 能够处理各种同步和异步的数据流，提供了完整的回压、调度和释放内存的能力等，成为了前端开发中的重要组成部分。
可观察者
基本概念
可观察者可以理解为一种可被订阅并观察到变化的对象，它可以是一个 WebSocket、一个键盘输入、一个鼠标事件、一个 HTTP 请求等等。当我们把一个可观察对象订阅之后，它是按照一定的频率推送数据到订阅者中，可以是一个值、一个状态或者一个事件，这些数据就组成了一个数据流。当收到新的数据或者事件发生时，可观察对象会向订阅者推送新的数据或者事件。
常用方法
在 Angular 中，我们可以通过导入 rxjs 库的 Observable 类来创建一个可观察对象，它提供了多种方法来创建或转换可观察对象：
of方法：以一组数据序列作为参数创建可观察对象，它可以是任何类型的值，如Observable.of(1,2,3)。from方法：以一个数组或可迭代对象作为参数创建可观察对象，如Observable.from([1,2,3])。interval方法：用于定时推送数字，可以通过传入一个时间参数来指定时间间隔，如Observable.interval(1000)。fromEvent方法：用于将 DOM 事件转换为可观察对象，如Observable.fromEvent(element, 'click')。
还有其他一些方法如 create、throw、empty 等，可以根据实际需求进行使用。
订阅与取消订阅
当我们创建了一个可观察对象后，就可以对它进行订阅以获得数据推送。一个可观察对象可以有多个订阅者，每次订阅都会返回一个 Subscription 类型的实例，它代表了一个该对象的订阅。当我们不再需要订阅时，可以通过调用 Subscription.unsubscribe() 方法来取消订阅，以释放资源。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- -- --------- ----- ---------- - ------------------- -- ---- -- -------- ----- ------------ - ---------------------- ----- ----- -- ------------------- --------- -- -- ------------------------ ------ --- -- ------------------ --- -- ---- ---------------------------
RxJS
基本概念
RxJS 是一个基于可观察者的异步编程库，它使用 Observable + Operator + Scheduler 的方式，提供了一些强大的操作符来处理数据流，从而简化了异步编程的复杂性。具体来说，Operator 是一种函数，接受一个可观察流并返回一个新的可观察流，Scheduler 则用于控制异步代码何时执行和如何执行。RxJS 还可以处理错误和取消订阅等问题，以及提供了多种调度器来处理多线程和性能优化等问题。
常用操作符
RxJS 提供了大量的操作符来简化处理数据流的过程，以下是一些常用的操作符：
map：将可观察对象中的每个元素都按照指定的方法进行处理，返回一个新的可观察数据流。filter：过滤可观察对象中的元素，返回一个包含符合条件的元素的可观察数据流。reduce：对可观察对象中的元素进行累加操作，返回一个包含累加结果的可观察数据流。merge：将多个可观察对象合并为一个可观察数据流。combineLatest：将多个可观察对象中的最新元素合并为一个数组并返回，只有当所有可观察对象都有数据时，才会将数据合并并推送到订阅者中。switchMap：切换可观察对象，返回一个新的可观察数据流。当新的可观察对象推送数据时，它会覆盖之前的可观察对象。delay：推送数据流的时间延迟一定时间。
实例演示
以下示例展示了如何通过 RxJS 的 fromEvent 方法创建一个可观察对象，将鼠标移动事件转换成坐标数据并可视化到 HTML 页面上：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - --- - ---- -----------------
----- --- - -------------------------------
-- ----------------
----- ---------- - -------------- -------------
-- --------------
----- ------------ - ----------------
----------- ----------- -- -
------ -
-- ------------- - ---------------
-- ------------- - -------------
--
--
--
-- -----------------
------------------------------------ -- -
------------------------- - ---------------------- ----------------- ------
---总结
本文介绍了在 Angular 中可观察者和 RxJS 的基本概念、常用方法和操作符，以及通过实例演示来理解如何使用他们来处理数据流。对于前端开发者来说，掌握可观察者和 RxJS，能够更好地处理异步代码、提升性能和用户体验，并能更加简化和优化代码结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c1b42968c7c53b0e5e8e1