ES10（ECMAScript 2019）引入了新的语法糖 - await 和 async，它们使异步编程更加简单和直观。在本文中，我们将详细介绍这两个关键字，并展示如何使用它们来改进您的前端开发。
Async 函数
async 是一个关键字，它可以用于声明异步函数。异步函数自动返回一个 promise，如果在函数中使用 return 关键字，那么这个 promise 将会使用返回值进行 resolve。如果在函数中抛出异常，则 promise 将被 reject。
以下是一个简单的示例：
async function myFunction() {
return "Hello world";
}
myFunction().then(result => {
console.log(result);
});输出结果为：
Hello world
异步函数可以与其他 await 和 async 语句一起使用，我们将在下一节中对此进行更深入的讨论。
Await 表达式
await 是另一个关键字，它只能在异步函数内部使用。await 表达式会暂停异步函数的执行并等待 promise 返回结果，然后将该结果返回给调用者。如果 promise 是 reject 状态，则它将抛出异常并使异步函数返回 reject 状态的 promise。
以下是一个使用 await 的示例：
async function myFunction() {
const result = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await result.json();
console.log(data.title);
}
myFunction();在此示例中，我们使用了 await 表达式来等待 fetch 返回结果，并使用 await 表达式等待解析 JSON 结果。此函数将输出结果：
delectus aut autem
使用 Async 和 Await 进行串行化
使用异步函数，我们可以轻松地串连多个异步方法，并以直观的方式进行展示。考虑以下示例，它演示了如何获取一组用户 ID，然后使用这些 ID 获取用户详细信息。
-- -------------------- ---- ------- ----- -------- ------------ - ----- ----- - ----- ---------------------------------------------------- ----- ---- - ----- ------------- ------ ------------- -- --------- - ----- -------- --------------- - ----- ---- - ----- ---------------------------------------------------------- ------ ----- ------------ - ----- -------- ------------- - ----- --- - ----- ------------- ------ ---------------------------------- - ------------------------ -- --------------------
在此示例中，我们定义了三个异步函数。getUserIds 函数用于获取所有用户的 ID，getUserById 函数用于获取单个用户详细信息，getAllUsers 函数使用这些函数获取所有用户的详细信息。在 getAllUsers 函数中，我们使用 Promise.all 将所有的异步请求组合在一起并等待所有请求完成。
总结
在本文中，我们介绍了 ES10 引入的 await 和 async 关键字。您现在已经了解了如何使用它们来改进您的前端开发。使用它们，您可以更清晰、更简单地编写异步代码，而不必使用回调函数和 promise 的复杂链式结构。
希望这篇文章能够帮助您加深对 ES10 新特性的理解，并带给您一些指导意义。如果您有对本主题的任何疑问或评论，请在下方留言区中分享您的想法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f5cbf2b2666adf3d8f75b