简介
wait-for-observables 是一个 npm 包，它提供了一种方便且易于使用的方式，用于等待观察到所有指定的 Observable 发出至少一个值。 它是为那些希望等待多个异步操作完成后执行下一步操作的前端开发者而设计的。
安装
wait-for-observables 可以使用 npm 安装。 执行以下命令即可：
npm install wait-for-observables
使用
基本使用
wait-for-observables 的基本用法是通过一个函数来包装所有需要等待的 Observable。 然后当所有 Observable 都发出至少一个值时，该函数才会返回一个 Promise。 这个 Promise 的结果是每个 Observable 发出值的数组，按在函数中指定的顺序排列。
以下是一个基本的例子：
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- ------ - ---------- - ---- ------ ----- ------------ - --- --------------------- -- - ------------- -- ---------------------------- -------- ----- -- ----- ------------ - --- --------------------- -- - ------------- -- ---------------------------- -------- ----- -- --------------------- -- -------------- --------------------------- -- - ---------------------- -------- -- ------------- ------- ------------ ------- --
在上面的代码中，我们创建了两个 Observable，一个在 2 秒后发出 'observable1 value'，另一个在 1 秒后发出 'observable2 value'。 在 waitForObservables 函数中，我们将这两个 Observable 以数组的形式提供给该函数。 结果Promise将在两个 Observable 都发出值后返回，并且数组将按照提供Observable的顺序排序。
同时等待多个值
wait-for-observables 还允许您同时等待多个 Observable 发出多个值。 您可以通过将一个对象作为参数传递来实现这一点。 该对象应该包含键值对，其中值是要等待的 Observable，而键则是返回的结果数组中的相应键。
以下是一个等待两个不同 Observable 发出两个值的示例：
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- ------ - -------- - ---- ------ ----- ------------ - --------------------------- ----- ------------ - ---------------------------- --------------------- -- -- ------------ ------------- ------------ ------------- ---------------- -- - ---------------------- -------- -- - ------------ --- --- ------------ --- -- - --
在上面的代码中，我们使用 interval 来创建两个 Observable，其中一个每 500ms 发出两个值，另一个每 1000ms 发出两个值。 然后我们将两个 Observable 作为对象的值以及键作为结果数组中相应位置的键提供给 waitForObservables 函数。
值得注意的是，由于这两个 Observable 都提供了两个值，因此结果数组中的每个键都包含两个值。
超时
有时您需要设置超时，以便在等待 Observable 的值时避免等待太长时间。 您可以将超时时间作为第二个参数传递给 waitForObservables 函数。
以下是一个具有 3s 超时的例子：
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- ------ - -------- - ---- ------ ----- ------------ - --------------------------- ----- ------------ - ---------------------------- --------------------- -- -- ------------ ------------- ------------ ------------- --- ------------------ -- - ---------------------- -------- -- - ------------ --- --- ------------ --- -- - -------------- -- - --------------------- -------------- -- ------ --- ----- ------- --
在上面的代码中，我们设置 3 秒的超时时间。 此时，如果结果数组中的所有 Observable 都没有发出至少一个值，Promise 将会被拒绝，并且错误信息将为 'Timed out after 3000ms'。
筛选值
wait-for-observables 也允许您对每个 Observable 发出的值进行筛选。 您可以将每个 Observable 对象作为包含 filter 函数的一个带有该 Observable 的键的对象。 该函数将在每个值发出时都会运行，并且只有通过该函数的值才会包含在结果数组中。
以下是一个筛选出大于 10 的值的例子：
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- ------ - -- - ---- ------ ----- ------------ - ----- -- -- -- -- ----- ------------ - ----- -- -- -- --- --- --- --- --------------------- -- -- ------------ - ----------- ------------- ------- ----- -- ----- - - -- ------------ - ----------- ------------- ------- ----- -- ----- - -- -- ---------------- -- - ---------------------- -------- -- - ------------ --- --- ------------ ---- --- --- - --
在上面的代码中，我们使用 of 来创建两个 Observable。 然后我们将过滤函数作为对象的一部分提供。 该函数接受 Observable 发出的每个值，并返回一个布尔值，以指示它是否应包含在结果数组中。
在此示例中，我们筛选出大于 3 和大于 10 的值，这将会得到 { observable1: [4, 5], observable2: [11, 12, 13] } 的结果。
结论
wait-for-observables 是一个实用的 npm 包，可以帮助前端开发者在等待多个 Observable 发出值时更轻松地编写代码。 它的使用方法是简单而灵活的，并且可以轻松处理同步和异步 Observable。 通过熟练掌握这个库，您可以更轻松地编写更复杂的前端代码，并且可以更加高效地工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f697b76a9b7065299ccb80d