在 JavaScript 中，异步编程是非常常见和重要的。在过去，我们经常使用回调函数来实现异步代码，但这也会造成回调地狱。而异步函数是为了解决这个问题而被引入到 ECMAScript 2018 (ES9) 标准中的一个重要特性。
基础
异步函数通过 async 和 await 关键字来实现异步代码的简洁和可读性。其中 async 表示函数是异步的，而 await 表示后面的表达式需要等待异步操作完成。
下面是一个简单的例子：
async function getData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}
getData().then(data => console.log(data));在这个例子中，getData 函数是异步函数，并且它等待两次异步操作：使用 fetch() 方法获取数据和将响应转换为 JSON 格式。由于使用了 await，这段代码显得非常简洁和易于阅读。
错误处理
异步函数的错误处理也比较方便。通常情况下，我们可以使用 try/catch 块来捕获异步函数中的错误，并进行相应的处理。下面是一个例子：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}在这个例子中，我们使用 try/catch 块来捕获异步操作的错误，并在控制台上输出错误信息。这是一种清晰和易于理解的错误处理方式。
防止阻塞
使用异步函数可以避免在执行网络请求等操作时造成页面阻塞。由于异步函数仅在异步操作完成后才继续执行代码，因此其它 JavaScript 代码和 UI 线程不会被阻塞。这是非常重要的优点，因为它可以提高用户体验并使整个应用程序更加流畅。
总结
异步函数是 ECMAScript 2018 (ES9) 中一个非常有用的新特性。它可以简化异步代码的编写，并提高可读性和错误处理。另外，异步函数还可以避免阻塞页面并提高用户体验。鼓励开发者尽可能地使用这个新特性。
示例
下面是一个完整的示例，用 async 和 await 关键字实现了异步获取数据并展示在 HTML 页面上。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Async Function Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="output"></div>
<script>
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
return data;
}
async function displayData() {
const data = await getData();
document.getElementById('output').innerHTML = JSON.stringify(data);
}
displayData();
</script>
</body>
</html>在这个示例中，我们使用了异步函数来获取数据，并将其展示在 HTML 页面上。可以看到，由于使用了异步函数，我们的代码非常简洁和易于阅读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652954bc7d4982a6ebbdfa17