ES2021：如何在您的项目中使用 Async/await
JavaScript 中的异步编程已成为前端程序员的一个重要主题。在过去的几年中，为了解决异步代码问题，ES6引入了 Promise，并在 ES8 中引入了 async/await。
async/await是一个非常有用的特性，它把异步编程转换成了同步编程的样式。使用async/await，代码变得更加可读、可维护、可测试，让代码看上去真的是同步操作，而不是异步操作。
本文将介绍如何在您的项目中使用async/await，以及如何使用它来处理异步任务的返回结果。
开始使用async/await
在函数前面加上async，它就变成了一个异步函数。在异步函数中，您可以使用await关键字等待一个异步操作完成。
下面是一个简单的示例，它使用async/await来等待一个500ms的异步操作：
async function wait500ms() {
await new Promise(resolve => setTimeout(resolve, 500));
}
wait500ms().then(() => console.log("Done!"));Async 函数隐式返回一个 Promise 对象，它的返回值就是异步操作的结果。如果该函数抛出异常，则该 Promise 会被拒绝，并且异常值将被拒绝处理程序接收。
下面是一个简单的异步函数的示例：
async function getUser(userId) {
const response = await fetch(`/api/users/${userId}`);
const user = await response.json();
return user;
}在这个例子中，我们使用async/await等待一个用户数据的异步请求，并在完成后返回用户信息。
处理多个异步任务
在实际项目中，通常我们需要等待多个异步操作完成后再执行其他操作。在这种情况下，我们可以使用Promise.all或Promise.race方法快速调用并等待多个异步操作。
Promise.all将返回一个包含所有Promise解决值的数组，或者如果一个Promise被拒绝，则返回一个拒绝的值。
下面是一个使用Promise.all等待多个异步任务的示例：
async function getUsers(userIds) {
const promises = userIds.map(userId => fetch(`/api/users/${userId}`).then(res => res.json()));
const users = await Promise.all(promises);
return users;
}在这个例子中，我们使用Promise.all等待所有请求的响应，并返回响应中的所有用户数据。
Promise.race将返回第一个Promise的结果，无论它是解决还是拒绝。
下面是一个使用Promise.race等待多个异步任务的示例：
-- -------------------- ---- -------
----- -------- --------------- -
----- -------- - ----- --------------
------------------------------
--- ----------- ------- -- ------------- -- ---------- ------------------ ------
---
-- ---------------- --- ---- -
----- --- ----------- --------- --- --------
-
----- ---- - ----- ----------------
------ -----
-在这个例子中，我们使用Promise.race等待单个用户数据的响应；如果请求超时，我们会捕获到一个Error异常，并抛出“User not found”的异常。
结论
async/await将异步操作转换成同步操作模式，使代码更加可读、可维护和可测试。通过这篇文章，您已经了解了如何在您的项目中使用async/await，并使用Promise.all和Promise.race等待和处理多个异步任务。
希望这篇文章能够帮助您更好地理解async/await的概念，以及如何在您的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3c29df40ec5a964e4bbca