在前端开发中，表单校验是非常常见的需求。表单校验通常需要进行一些异步的操作，比如验证输入的邮箱是否已经存在于数据库中，在异步操作完成前，需要暂停表单的提交，并给用户以相应的提示。
在 ES7 中，新增了 async/await 关键字，让异步操作变得更加简洁易懂。今天，我们将学习如何使用 ES7 async/await 进行表单校验。本文将分为两部分，第一部分将介绍 async/await 的基本用法，第二部分将介绍如何使用 async/await 进行表单校验。
一、async/await 的基本用法
async/await 是 ES7 中最大的语法变化之一。使用 async/await 构建异步操作比使用回调函数和 Promise 更加直观和易读。下面是一个使用 Promise 的例子，用于从数据库中获取一个用户的信息：
getUserInfo(userId)
.then(userInfo => {
console.log(userInfo);
})
.catch(error => {
console.error(error);
})使用 async/await 可以将上面的代码转化为：
try {
const userInfo = await getUserInfo(userId);
console.log(userInfo);
} catch (error) {
console.error(error);
}下面是 async/await 的一些特点：
- async 函数返回一个 Promise 对象；
- 在 async 函数中使用 await 暂停函数的执行，直到 Promise 完成并返回结果；
- async 函数中的异常会被 Promise 拒绝并抛出。
二、使用 async/await 进行表单校验
在实际开发中，表单校验通常是一个异步的过程。我们可以使用 async/await 简化表单校验的代码，并使代码更加易读易懂。下面是一个简单的表单校验例子：
<form> <label>邮箱地址：<input type="email" name="email"></label> <button type="submit">提交</button> </form>
-- -------------------- ---- -------
----- -------- ------------------- -
----------------------- -- ------
----- -------- - --- ----------------------- -- -- -------- --
----- ----- - ---------------------- -- ------
-- -------- -
-------------------
-------
-
--- -
----- ------ - ----- ----------------------------- - ------- - ----- - ---
-- -------------------- -
--------------------
- ---- -
------------------
-
- ----- ------- -
---------------------
-----------------
-
-
----- ---- - -------------------------------
------------------------------- --------------在上面的代码中，我们定义了一个名为 validateForm 的 async 函数来进行表单校验。当用户点击提交按钮时，validateForm 函数被调用，并阻止表单的提交。然后，我们通过 FormData 对象获取表单中的数据，对数据进行校验，如果邮箱地址为空，直接弹出提示框。如果邮箱地址不为空，我们使用 axios 库发起一个 GET 请求，检查该邮箱是否已经存在。在异步操作完成之前，代码执行被暂停，并等待异步操作的结果。如果邮箱已经存在，则弹出提示框告诉用户该邮箱已经被占用。如果邮箱可用，则弹出提示框告诉用户该邮箱可用。最后，我们在 catch 中捕获可能出现的异常，并进行相应的提示。
三、结论
使用 async/await 可以大大简化表单校验代码，使其更加易读易懂。在你的下一个表单校验项目中，不妨试试使用 async/await 进行代码的编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff6a2867736bdc72ece64e