JavaScript 是一门异步编程语言。随着 Web 应用程序的复杂性的增加，对于异步的需求也越来越高。ES2017 引入了 async 函数，该函数被设计用来简化 Promise 的使用并使异步代码更加易读、易维护。在本文中，我们将介绍 async 函数的背景以及如何在 JavaScript 中正确地使用它来编写高效、可维护的异步代码。
什么是 async 函数？
async 函数是 ECMAScript 2017 中引入的一种特殊函数，标记为 async 的函数会返回一个 Promise 对象。该函数中使用 await 关键字来等待 Promise 对象完成操作并返回其结果。
异步编程为何重要？
异步编程解决了许多问题。其中一些问题是：
- Web 应用程序可能需要向后端服务器请求信息并等待服务器响应。在等待的过程中，前端应用程序应该继续执行其他任务以避免“冻结”。
- 多次操作可能需要分别完成，但由于操作顺序的不确定性，可能会出现错误或不必要的延迟。
- JavaScript 代码执行速度比较慢，如果不采用异步编程方式，则可能导致用户在等待大量数据处理时出现明显的“停顿”。
async 函数的语法
async 函数的语法非常简单。用 async 标记的函数会将函数体自动包装成一个 Promise 对象。
async function foo() {
return "hello world";
}在上面的示例中，返回的字符串将会被自动封装成一个 Promise。
使用 async 关键字修饰哪些函数是值得考虑的问题。尽管 async 函数可以自动返回 Promise 对象并处理异步流程，但它们仍然可能会导致程序进行大量计算。如果需要处理许多计算，建议将大部分逻辑放在异步函数外部，仅使用异步函数来处理特定操作。
await 关键字和 Promise 对象
async 函数使用 await 关键字来等待 Promise 对象完成操作并返回其结果。
async function bar() {
const greeting = await foo();
console.log(greeting);
}上面的代码将等待 foo 函数完成后，再将其结果传递给变量 greeting。await 关键字将暂停程序的执行，直到 Promise 就绪。如果 Promise 遇到问题，则 await 关键字将抛出该错误，使其可以在 try-catch 语句中处理错误。
在调用 async 函数时，返回的是 Promise 对象，并且该 Promise 对象将会解析到 async 函数的返回值（包括通过 return 语句返回的值）。
async 和 await 的结合使用
async 和 await 可以深度结合使用，以处理更多的异步操作。例如，假设有一个请求某服务器并获取一些数据的函数。
async function serverRequest(url) {
const link = `https://${url}`;
const response = await fetch(link);
const data = await response.json();
return data;
}在这个函数中，我们使用了 fetch 去获取资源，并通过 await 关键字等待 Promise 对象完成。如果 Promise 无法完成操作，则 await 将引发 reject 错误，该错误可在 try-catch 中进行捕获。
上述函数返回的是一个 Promise，该 Promise 包含从服务器获取的数据。由于 async 函数可以自动返回 Promise 对象，因此无需额外包装。
总结
在本文中，我们探讨了 async 函数及其如何帮助我们简化异步编程。虽然 async 和 await 在编写异步代码时非常有用，但在使用时需要特别注意，因为它们可能会降低性能。当合理使用 async 和 await 时，该技术将大大提高你的代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9cc86f6b2d6eab34f604e