引言
随着前端应用的复杂性日益增大，异步编程已成为现代 Web 开发的必要方式。为了更加方便、可读、可维护地使用异步函数，ES11 中增加了对 async 函数的支持。本文将介绍 async 函数的基本用法、注意事项，并提供一些示例代码，希望对读者能够有所帮助。
async 函数简介
async 函数是一种异步函数的语法糖形式，其目的是让异步函数的调用更加简单。async 函数本质上是一个返回 Promise 对象的函数。
async 函数的基本语法如下：
async function foo() {
// code goes here
}
async 函数可以包含 await 表达式， await 表达式会暂停 async 函数的执行，直到其后面的 Promise 对象被 fulfilled 或 rejected 为止。
async function foo() {
return await myPromise();
}async 函数调用示例
下面是一个使用 async 函数调用 API 的示例：
-- -------------------- ---- ------- ----- -------- -------------- - ----- --- - ----- ----------- ----- ---- - ----- ----------- ------ ----- - ------------------------------------------------ ---------- -- ------------------ ------------ -- ----------------------
上面的代码中，fetchData 函数使用了 async/await 语法，以此来简化异步编程。当 fetchData 函数被调用时，它会去获取指定 URL 的 JSON 数据，并在完成后将数据返回给调用方。由于 async 函数返回的是一个 Promise 对象，因此我们可以通过 .then() 和 .catch() 方法来处理异步操作的结果。
async 函数的注意事项
async 函数必须返回一个 Promise 对象。
如果 async 函数直接返回一个值，该值会自动被包装成一个 Promise。
当 async 函数中的 await 表达式用于等待一个 Promise 对象时，当 Promise 对象处于 reject 状态时，async 函数会抛出一个错误。
在 async 函数中，返回的任何值都不会影响函数的执行结果。
在 async 函数中使用 try/catch 可以捕获异步操作的错误，从而方便程序的调试。
如何将多个 async 函数合并成一个 Promise
如果你需要将多个 async 函数合并成一个 Promise，可以使用 Promise.all() 方法，该方法可以等待所有 Promise 都返回后再返回一个 Promise 对象。
async function foo() {
const [data1, data2] = await Promise.all([
fetchData('https://api.example.com/data1'),
fetchData('https://api.example.com/data2')
]);
console.log(data1);
console.log(data2);
}上面的代码演示了 Promise.all() 方法的基本用法。在异步函数 foo() 中，我们调用了两个函数 fetchData()，每个函数都返回一个 Promise 对象。我们使用 Promise.all() 方法等待这两个 Promise 都返回后，再执行接下来的代码。注意，在 Promise.all() 的结果中，返回数据的顺序和传递参数的顺序一致。
总结
本文介绍了 async 函数的基本用法和注意事项，我们还提供了一些示例代码，希望对读者能够有所帮助。异步编程虽然比同步编程复杂，但工作中我们经常会遇到需要异步处理的情况。使用 async 函数可以让我们更加方便、可读、可维护地处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6594ebc4eb4cecbf2d934114