ES10 中引入的 Observables 模式是一种非常有用的编程模式，它可以在前端应用程序中利用其异步和响应式能力，对于处理异步任务非常有用。Observables 是一种能够产生多个值的对象，在其生命周期中可以发出新的值，也可以终止并回收资源。本篇文章将介绍 ES10 中的 Observable 新特性以及如何使用 unsubscribe 来取消订阅。
观察者设计模式
Observable 设计模式是基于观察者 (Observer) 设计模式的变体。在观察者模式中，一个主题对象 (Subject) 维护了一个依赖于它的观察者列表，主题对象在状态发生变化时会通知观察者，使它们能够自动更新。在 Observable 模式中，被观察者 (Observable) 公开了订阅方法，以允许外部用户注册其各种观察者，这些观察者会接收到由被观察者推送的新值。
比如在 Angular 中，我们可以通过 HttpClient 发起异步请求，它的响应值就是一个 Observable 对象，我们可以订阅（subscribe）这个对象，以异步响应接口数据并进行处理。
ES10 中的 Observable
在 ES10 中，Observable 已经成为原生对象，可以直接使用。在 JS 中实现 Observables，我们可以使用 RxJS 库，它提供了更多的响应式编程功能。但本篇文章将仅介绍 ES10 中的原生 Observable。
Observable 基础
如何定义 Observable 对象？我们需要使用 Observable.create() 方法，该方法接收一个函数作为参数，这个函数的参数是 observer 对象，通过这个对象可以发送值，错误或完成通知。
下面是一个基础的 Observable 示范，它会 1s 后发送两个值。
----- - ---------- - - ---------------- ----- ------------ - ---------------------------- -- - ----------------------- ------------- -- ------------------------ ------ ------------- -- ------------------------ ------ --- ----- ------------ - ----------------------- ------- -- ------------------- ------- -- --------------------- -- -- ------------------------ -- ---- --
输出：
----- ------ ------ ---------
我们可以看到，Observable 会按照定义的时间间隔，定时发送新的值。但这个 subscription 并没有被取消，我们需要使用 unsubscribe() 来取消 Observable 的订阅。
取消订阅 unsubscribe
我们可以使用 unsubscribe() 方法来取消 Observable 订阅。
----- - ---------- - - ---------------- ----- ------------ - ---------------------------- -- - ----------------------- ------------- -- ------------------------ ------ ------------- -- ------------------------ ------ --- ----- ------------ - ----------------------- ------- -- ------------------- ------- -- --------------------- -- -- ------------------------ -- ------------- -- --------------------------- ------ -- - ---- -----
输出：
----- ------
在 1.5s 后输出停止，因为我们使用了 unsubscribe() 方法来取消了订阅。
错误处理
当 Observable 发生错误时，我们可以使用 observer.error() 方法来产生一个错误通知。这样可以让订阅 Observable 的观察者接收并处理这些错误。
----- - ---------- - - ---------------- ----- ------------ - ---------------------------- -- - ----------------------- ------------- -- ------------------------ ------ ------------- -- ------------------------ ------ ------------- -- ------------------------- ------ -- ---- --- ----- ------------ - ----------------------- ------- -- ------------------- ------- -- --------------------- -- ---- -- -- ------------------------ -- ------------- -- --------------------------- ------
输出：
----- ------ ------ ------
完成通知
当 Observable 发送完成通知时，我们可以使用 observer.complete() 方法来停止 Observable 定时发送新的值，因为 Observable 是不可重新激活的，所以一旦它发送了完成通知，观察者就无法再收到任何新值。
----- - ---------- - - ---------------- ----- ------------ - ---------------------------- -- - ----------------------- ------------- -- ------------------------ ------ ------------- -- -------------------- ------ -- ------ ------------- -- ------------------------ ------ --- ----- ------------ - ----------------------- ------- -- ------------------- ------- -- --------------------- -- -- ------------------------ -- ---- --
输出：
----- ------ ---------
map 转换
在 Observable 中，我们经常需要对每个值进行转换并返回一个新值。可以使用 map 进行转换。
----- - ---------- - - ---------------- ----- ------------ - ---------------------------- -- - ----------------- ----------------- ----------------- -------------------- --- ----- ------------ - ------------ ----------------- -- ----- - --- -- ------ - ------------------ -- --------------------
输出：
- - -
filter 过滤
在 Observable 中，我们也可以使用 filter 进行过滤。
----- - ---------- - - ---------------- ----- ------------ - ---------------------------- -- - ----------------- ----------------- ----------------- -------------------- --- ----- ------------ - ------------ -------------------- -- ----- - --- -- ------- - -- ------------------ -- --------------------
输出：
- -
总结
本篇文章介绍了 ES10 新特性 Observables 以及如何使用 unsubscribe 来取消订阅。通过 Observable，我们可以更加方便地进行异步任务处理，使得前端程序在减少 CPU 时间的同时提高响应能力。
完整代码请前往：https://codesandbox.io/s/es10observable-7iouu?file=/index.js
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647608b7968c7c53b02fb919