在前端开发中，我们经常遇到需要等待某个条件满足才能继续执行的情况，比如等待某个异步操作完成、等待某个元素加载完成等。在这些情况下，我们可以使用 JavaScript 的 Promise 对象来实现等待功能。
但是，Promise 对象并没有提供一个等待条件满足的 API。在实际开发中，我们需要自己实现一个等待条件满足的方法。这时可以使用一个 npm 包叫做 promise-wait-until。
promise-wait-until 是一个 Promise 扩展库，提供了 waitUntil 方法，可以等待一个条件满足后再继续执行 Promise 链。本文将详细介绍 promise-wait-until 的使用方法。
安装
使用 npm 安装 promise-wait-until：
npm install promise-wait-until
使用方法
waitUntil 方法
waitUntil 方法的签名如下：
Promise.waitUntil(predicate[, timeoutMs[, intervalMs[, customErrorMessage]]])
waitUntil 方法接受四个参数：
- predicate：一个函数，用于判断是否满足条件，返回值为 true 或 false。
- timeoutMs（可选）：等待超时时间，单位为毫秒，默认值为 Infinity。
- intervalMs（可选）：轮询间隔时间，单位为毫秒，默认值为 20。
- customErrorMessage（可选）：自定义错误信息。
示例
下面给出一个简单的示例代码，用于等待文档加载完成后再执行某个操作：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------------ -- ------------------- --- -----------
-------- -- -
-- ------
--
---------- -- -
--------------------- -----
---在上述代码中，我们使用了 waitUntil 方法等待文档加载完成。predicate 参数是一个判断文档是否加载完成的函数，返回值为 true 或 false。在这个例子中，我们判断了 document.readyState 是否等于 'complete'。
在 waitUntil 的后续链式调用中，我们可以执行需要等待文档加载完成之后才能执行的某个操作。如果等待超时，catch 方法会捕获错误并打印错误信息。
waitUntil 和 async/await
我们也可以使用 async/await 风格编写代码，将 waitUntil 封装在一个 async 函数中。示例如下：
import waitUntil from 'promise-wait-until';
async function loadDocument() {
await waitUntil(() => document.readyState === 'complete');
// 执行某个操作
}在上述代码中，我们使用 async/await 语法糖将 waitUntil 封装在了 loadDocument 函数中。await 关键字会等待 promise 完成，并返回 promise 结果。在这里，我们等待文档加载完成后再执行某个操作。
总结
本文介绍了 npm 包 promise-wait-until 的使用方法。使用 promise-wait-until 可以方便地实现等待一个条件满足后再继续执行 Promise 链的功能。我们可以使用 waitUntil 方法等待一个条件满足，也可以结合 async/await 语法糖编写代码。在实际开发中，promise-wait-until 可以帮助我们更加高效地编写等待条件满足的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d281e8991b448e01da