当我们在编写前端代码时，有时候需要在用户提交表单之前进行一些额外的操作。比如，我们要验证表单数据的合法性、格式化数据、发送请求等等。本文将介绍几种常见的方法来实现在提交前做某事。
监听表单提交事件
监听表单提交事件是最常见的方法之一。我们可以通过 addEventListener 方法来添加一个 submit 事件监听器，然后在事件处理函数中执行相应的操作。下面是一个示例代码：
----- ------------- ------ ----------- ----------- --------- ------- ------------------------- ------- -------- ----- ---- - ---------------------------------- ------------------------------- ----- -- - -- -------- ---------------------- -- ---------- --------------------- -- ---------
上面的代码会监听表单的提交事件，并且在表单提交之前，阻止默认的提交行为，然后输出一条日志信息。
使用 Promise
如果我们要在提交表单之前发送一个异步请求，那么使用 Promise 是一个不错的选择。我们可以在表单提交之前创建一个 Promise 对象，在 Promise 执行完毕之后再进行表单的提交操作。
下面是一个示例代码，假设我们要在提交表单之前向服务器查询用户名是否已经被占用：
----- -------------
------ ----------- ----------- ---------
------- -------------------------
-------
--------
----- ---- - ----------------------------------
------------------------------- ----- -- -
-- --------
----------------------
-- ---- ------- ------------
----- ------- - --- ----------------- ------- -- -
----- ----- - ----------------------------------------
----- ----- - -----------
--------------------------------------
-------------- -- ----------------
---------- -- -
-- -------------- -
-----------------
- ---- -
---------
-
--
------------ -- -
---------------------
--
--
-- - ------- ----------------
--------------- -- -
-------------
-------------- -- -
--------------------
--
--
---------上面的代码会在表单提交之前发送一个异步请求，然后根据返回的结果决定是否继续进行表单提交操作。
使用 async/await
使用 Promise 可以方便地实现异步操作，但是 Promise 的语法有时候可能会显得有些复杂。ES2017 引入了 async/await 语法，可以更加简洁地处理异步操作。
下面是一个使用 async/await 实现异步操作的示例代码：
----- -------------
------ ----------- ----------- ---------
------- -------------------------
-------
--------
----- ---- - ----------------------------------
------------------------------- ----- ----- -- -
-- --------
----------------------
--- -
----- ----- - ----------------------------------------
----- ----- - -----------
----- -------- - ----- --------------------------------------
----- ---- - ----- ---------------
-- -------------- -
----- --- ----------------
- ---- -
-------------
-
- ----- ------- -
--------------------
-
--
---------上面的代码使用了 async/await 语法，可以让异步操作更加简洁易懂。
总结
在本文中，我们介绍了三种常见的方法来实现在提交前做某事。无论是监听表单提交事件、使用 Promise 还是使用 async/await，都
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11409