在前端开发过程中，有时遇到需要等待某个事件发生之后才能继续执行代码的情况，如果没有处理好这种情况就会造成代码逻辑混乱，尤其是在异步场景下。而 event-to-promise 就是一款能够将事件转为 Promise 的轻量级 npm 包，它能够简单、优雅地处理这种场景，同时能够提高我们的开发效率。下面是 event-to-promise 使用教程。
安装和引入
首先，我们需要在命令行中使用 npm 安装 event-to-promise 包，如下所示：
--- ------- ---------------- ------
然后，在我们的代码中引入该包：
----- -------------- - ----------------------------
基本使用
event-to-promise 中最基本的方法是将一个事件转换成一个 Promise。例如，我们要监听一个“click”事件，当这个事件发生时，我们需要执行一段代码：
-------------------------------- ---------- - ----------------------- ---
如果这个事件发生之后，我们需要执行一些其他的操作，我们就需要将这个事件转换成一个 Promise：
----- ------- - ---------------------- --------
-------- -- -
-----------------------
---这样，当点击事件发生时，我们等价于执行了 promise 的 resolve 方法，从而触发 promise.then() 中的代码。
参数解析
event-to-promise 还支持多种参数，让我们可以根据不同的情况来定制化解决方案。
target
target 表示触发事件的目标对象。它可以是普通的 DOM 元素，也可以是 EventEmitter 实例。比如下面的代码就是一个 Electron 的 BrowserWindow 实例：
----- - ------------- - - --------------------
----- --- - --- ----------------
------------------- ---------------- - ------------- ---- --
-------- -- -
------------------- -- ----- -- --------
---可以看到，我们在监听 ready-to-show 事件时，还带有一个 ignoreErrors 的参数。它会在 ready-to-show 事件没有发生的时候，忽略这个错误。这在某些场景下非常有用。
options
options 是一个对象，支持下列参数：
- ignoreErrors: 是否忽略错误，默认为 false。如果设为 true，当事件没有发生时，不会抛出异常，而是返回一个带有错误属性的 Promise。
- timeout: 超时时间，单位毫秒。在这个时间内如果事件没有触发，则返回一个带有错误属性的 Promise。
返回值
eventToPromise 方法返回的是一个 Promise 实例。当事件发生时，该 Promise 会 resolve，如果事件没有发生则会 reject 一个 Error 实例。当然，我们还可以通过 options 中 ignoreErrors 参数来控制是否忽略这个错误。
示例
下面我们来看一个在 React 项目中使用 event-to-promise 的实例。该实例中，我们创建了一个 Dialog 组件。当用户点击对话框的 OK 按钮时，我们需要关闭对话框。关闭对话框的操作是由外部组件传入的。在关闭对话框之前，我们需要先执行一个 onConfirm 回调函数。
------ ------ - -------- - ---- --------
------ - ------- ------ - ---- --------------------
------ -------------- ---- -------------------
-------- --------------- ---------- -------- ------------- -- -
----- ------ -------- - ---------------
----- ------------- - -- -- -
---------------
------------------------ ------------------ -- -
------------
----------
---
--
----- ----------- - -- -- -
---------------
----------
--
------ -
------- ----------- ----------------
------- -----------------------------------
------- -------------------------------------
---------
--
-
------ ------- --------------在 handleConfirm 方法中，我们监听了一个 keydown 事件来达到我们的目的。也就是说，仅当用户在对话框中点击 OK 按钮并且按下键盘时，才会执行 onConfirm 和 onClose 回调函数。
总结
通过本文的介绍，我们了解了 event-to-promise 的基本用法和参数解析，并通过一个实例对其使用做了具体说明。在异步开发过程中，我相信 event-to-promise 这个 npm 包会为我们的开发带来不少便利。通过像这样一些小工具的不断探索和使用，我们的开发能力也会不断提升。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-event-to-promise