在前端开发中，我们常常需要使用 rxjs 这个强大的库来管理和处理异步事件流。而其中的 observables 模式则是rxjs中最为核心和重要的概念之一。这里，我将介绍一个可以帮助我们更加便捷地使用observables模式的npm包 —— observ-unwrap。
observ-unwrap 是什么？
observ-unwrap是一个提供了便捷的observable unwrap的npm包, 配合rxjs使用, 可以帮助我们轻松地将observable中的值提取出来。
安装 observ-unwrap
使用 npm 命令安装observ-unwrap：
npm install observ-unwrap
observ-unwrap 使用示例
基本用法
我们可以使用 observ-unwrap 将一个observable解包，并获得observable中的值：
import { of } from 'rxjs';
import { unwrap } from 'observ-unwrap';
const observableWithValue$ = of('hello');
const value = unwrap(observableWithValue$);
console.log(value); // 输出：‘hello’unwrap() 仅仅只是一个简单的函数，它可以将observable转化为摆脱observable特性的非observable的值。
提供默认值
如果 observable 没有发出任何值，或者我们需要提供一些默认值，以避免代码出现异常，我们可以像这样设置：
import { of } from 'rxjs';
import { unwrap } from 'observ-unwrap';
const emptyObservable$ = of(null);
const defaultValue = 'hello world';
const value = unwrap(emptyObservable$, defaultValue);
console.log(value); // 输出：‘hello world’ 这种情况下，当 emptyObservable$ 是空的observable。这个时候，unwrap()就会输出'hello world'。
异常情况处理
当 observable 没有发出任何值，并且我们没有设置默认值，则 unwrap() 就会抛出一个异常。 用 try/catch 捕捉此异常可轻松处理此异常。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ------ - ---- ---------------- ----- ---------------- - --------- --- - ----- ----- - ------------------------- ------------------- -- ------- - ----- ------- - --------------------- -- --------- -- ----- ------- -- ---------- -
处理带有多个值的 observable
如果我们的observable中存在多个值，unwrap()会返回最后一次提取的值。我们可以使用 .take() 操作符来处理。
import { of } from 'rxjs';
import { take } from 'rxjs/operators';
import { unwrap } from 'observ-unwrap';
const observableWithMultipleValue$ = of('hello', 'world');
const value = unwrap(observableWithMultipleValue$.pipe(take(1)));
console.log(value); // 输出：‘hello’ 在 observableWithMultipleValue$中，我们设定了两个值： 'hello' 和 'world'。我们可以使用 take(1) 操作符只提取一次observable，这并没有真正解决问题，但是我们通过此方式确保了解析observable时只获取了一个值。
解析复杂的 observable
我们可以编写observable，使其在符合特定条件时返回不同的值。在这种情况下，我们可能需要一些其他处理以便解析出部分值。
-- -------------------- ---- -------
------ - ------------- - ---- -------
------ - ------ - ---- ----------------
----- -------- - -------
----- --------- - --------
----- ---------- - ------------
----- ----------- - ------------
----- ----------- - -------------------------- --------------
----- ------------- - ------- ---- -- -
------ ----- -
---- ---------
------ ---------
---- ----------
------ ---------
--------
------ -----
-
--
----- --------- - ---------------------------------- ----------
----- ---------- - ---------------------------------- -----------
----------------------- -- --- -------
------------------------ -- --- -------在此示例中，我们使用了 combineLatest 创建了一个包含two observables的新observable。此observable每当任何observable发出新值时就会发射新值。
使用 getValueByKey() 函数，我们可以根据一个给定的 “键” 来解析observable的值，最后两个函数调用输出了我们在 leftValue$ 和 rightValue$ observables 中设置的值。
结论
observ-unwrap是一个极其简单但同时也非常有用的npm包，它可极大地提高我们处理及管理observables的效率。如果您在日常开发中经常使用observables模式，我建议您一定要尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66faa