在现代 JavaScript 开发中，处理异步操作已成为必不可少的技能。ES9 引入了 Async Await 和 Promise.all() 方法，使处理多个异步函数变得更加简单直观。
Promise.all()
Promise.all() 接受一个 Promise 对象数组，返回一个新的 Promise。新 Promise 的 resolve() 会在所有 Promise 对象 resolve 后被调用。
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(values => console.log(values)) // [1, 2, 3]
如果其中一个 Promise 被 reject，Promise.all() 返回的 Promise 也会 reject。
const promise1 = Promise.resolve(1); const promise2 = Promise.reject(new Error('Error')); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(values => console.log(values)) .catch(error => console.log(error.message)) // Error
Promise.all() 适用于当我们需要等待所有异步操作完成后再进行下一步操作的场景。
Async Await
Async Await 是使用异步函数的一种语法糖。我们可以使用 async 关键字来定义异步函数，它总是返回一个 Promise 对象。在异步函数中，我们可以使用 await 关键字来等待一个异步操作完成。
async function fetchData() { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await response.json(); return data; } fetchData() .then(data => console.log(data));
在上面的例子中，我们定义了一个异步函数 fetchData()，它使用了 fetch() API 来获取数据。我们使用了 await 来等待 fetch() 完成，并将 response 转换为 JSON 格式的 data。
Async Await 使我们的异步代码更直观易懂，并且避免了使用回调函数的复杂性。
结合使用 Async Await 和 Promise.all()
我们可以结合使用 Async Await 和 Promise.all() 来处理多个异步操作。以下是一个示例，我们将获取多个 API 并将结果合并。
-- -------------------- ---- ------- ----- -------- ---------- - ----- --------------- -------------- - ----- ------------- ---------------------------------------------------- --------------------------------------------------- --- ----- ----- - ----- --------------------- ----- ----- - ----- --------------------- ------ - ------ ----- -- - ---------- -------- ------ ----- -- -- ------------------ --------展开代码
在上面的代码中，我们定义了一个异步函数 getUsers()，它使用了 Promise.all() 来获取多个 API。我们等待所有 API 都完成后，将结果转换为 JSON 格式并返回 users 和 posts。
总结
在 ES9 中，Async Await 和 Promise.all() 是处理异步操作的简单方法。它们使异步代码更易于理解和维护。可以在异步代码中使用它们来处理多个异步操作。这将使您的代码更简洁，更清晰。
希望这篇文章能为想要学习异步编程的前端开发者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b88e1aadd4f0e0ff11f3be
