在前端开发中，我们常常需要对异步操作进行处理。RxJS 是一种非常流行的异步编程库，Observable、Observer、Subscription 是它的基本概念。
本文将详细介绍 Observable、Observer、Subscription 的区别，并为读者提供相关的学习和指导意义。
Observable
Observable 是 RxJS 的核心概念，代表一个可观察的对象。Observable 对象可以对外发出事件，我们可以通过对这些事件进行处理来实现异步编程。
在 RxJS 的官方文档中，Observable 被定义为 “表示一个概念，这个概念是一个可调用的未来值或事件的集合。”
Observable 对象通常是由一个事件流所产生的，比如鼠标点击、网络请求、定时器等。Observable 对象可以被观察者所订阅，以便在事件发生时得到通知。
下面是 Observable 的一个简单示例：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ---------- - --- --------------------- -- -
-------------------
-------------------
-------------------
------------- -- -
-------------------
----------------------
-- ------
---
----------------- ------ ------------
----------------------
------- - ---------------- ----- - - --- --
---------- - ------------------------ ----- --------- - - ----- --
---------- - -------------------- -
---
----------------- ----- ------------这个示例中，我们创建了一个 Observable 对象，它在订阅时会传递一个 subscriber 参数，subscriber 实际上是一个 Observer 对象，用于响应 Observable 中 next、error、complete 事件。
在上面的示例中，我们通过 Observable 发出了四个事件，分别是 1、2、3、4，其中第四个事件延时 1 秒后才会发出。然后我们在 Observable 对象上订阅了这些事件，得到了相应的通知。
Observer
Observer 是 RxJS 中的另一个核心概念，它与 Observable 对象紧密相关。Observer 对象可以对 Observable 产生的事件进行处理。
Observer 对象由三个函数组成：next、error 和 complete，它们分别对应 Observable 发出的值、错误和完成事件。
下面是 Observer 的一个简单示例：
import { Observer } from 'rxjs';
const observer = new Observer({
next: x => console.log('got value ' + x),
error: err => console.error('something wrong occurred: ' + err),
complete: () => console.log('done')
});这个示例中，我们创建了一个 Observer 对象，它包含了三个函数，分别对应 Observable 发出的 next、error 和 complete 事件。当 Observable 发出这些事件时，这些函数会被调用。
Subscription
Subscription 是 RxJS 中用于取消订阅的对象。当我们订阅了一个 Observable 对象后，如果不再需要接收它发出的事件，就可以使用 Subscription 对象来取消订阅。
Subscription 对象有一个 unsubscribe 函数，调用这个函数可以取消订阅，停止接收事件。
下面是 Subscription 的一个简单示例：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ---------- - --- --------------------- -- -
----- ---------- - -------------- -- -
----------------------
-- ------
------ -- -- -
--------------------------
--
---
----- ------------ - ---------------------- -- ----------------
------------- -- -
---------------------------
-- ------这个示例中，我们创建了一个 Observable 对象，它每秒钟会发出一个 'hi' 的事件。我们在 Observable 上进行订阅，并将结果输出到控制台上。
我们还为 Observable 返回了一个函数，这个函数会在 Subscription 被取消时执行，用于清除定时器。
最后，我们在 5 秒钟之后使用 Subscription 对象取消了订阅。
总结
Observable、Observer 和 Subscription 是 RxJS 中非常重要的概念。Observable 是一个可观察的对象，Observer 是用于处理 Observable 发出的事件的对象，而 Subscription 是用于取消订阅的对象。
在进行异步编程时，我们需要使用这三个对象来控制事件流，以便获得更好的开发体验和代码组织。如果您对 RxJS 还不太熟悉，可以在官方文档中了解更多相关知识。
参考资料：
- RxJS 官方文档：https://rxjs.dev/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f68be3f6b2d6eab3f21419