在 JavaScript 开发中，异步编程是非常常见的问题，尤其是在前端开发中，由于网络请求、DOM 操作等非常耗时，如果使用传统的回调函数方式来处理异步操作，会使得代码逻辑非常复杂，难以维护。为了解决这个问题，ES6 引入了 async/await，这是一种更加简单、直观的异步编程方式，本文将详细介绍 async/await 的语法、用法及常见应用场景。
async/await 的语法
async/await 是基于 Promise 的异步编程方式的语法糖，它可以让异步代码看起来像同步代码一样，使得代码逻辑更加清晰、易于理解。下面是 async/await 的语法：
async function foo() {
const result = await someAsyncOperation();
console.log(result);
}上面的代码中，async 表示这是一个异步函数，函数内部使用 await 关键字等待异步操作完成后再继续执行。在等待异步操作的过程中，async 函数会挂起，并且不会阻塞主线程。
async/await 的用法
1. 等待 Promise 对象
在 async 函数中使用 await 关键字可以等待一个 Promise 对象完成，然后返回 Promise 对象的 resolve 值。例如：
async function foo() {
const result = await Promise.resolve(42);
console.log(result); // 42
}在上面的代码中，foo 函数等待 Promise.resolve(42) 完成后，将返回值 42 赋值给 result 变量，并输出结果。
2. 处理异步异常
在使用 async/await 进行异步编程时，可以使用 try-catch 语句处理异步异常，例如：
async function foo() {
try {
const result = await someAsyncOperation();
console.log(result);
} catch (err) {
console.error(err);
}
}在上面的代码中，如果 someAsyncOperation 抛出异常，将会被 catch 语句捕获并输出错误信息。
3. 并行处理多个异步操作
在某些场景下，我们需要同时处理多个异步操作，并等待它们全部完成后再进行下一步操作。这时可以使用 Promise.all 方法和 async/await 结合使用，例如：
async function foo() {
const [result1, result2] = await Promise.all([
someAsyncOperation1(),
someAsyncOperation2(),
]);
console.log(result1, result2);
}在上面的代码中，使用 Promise.all 方法同时处理 someAsyncOperation1 和 someAsyncOperation2 两个异步操作，并等待它们全部完成后将结果赋值给 result1 和 result2 变量。
async/await 的常见应用场景
1. 处理网络请求
在前端开发中，网络请求是非常常见的异步操作，使用 async/await 可以让代码更加简洁、易于维护。例如：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (err) {
console.error(err);
}
}在上面的代码中，使用 fetch 方法发送网络请求，并使用 await 等待响应结果，然后将结果解析为 JSON 格式并输出。
2. 处理 DOM 操作
在前端开发中，DOM 操作也是常见的异步操作，例如：
async function addElement() {
const element = document.createElement('div');
element.innerHTML = 'Hello, World!';
document.body.appendChild(element);
await new Promise((resolve) => setTimeout(resolve, 1000));
element.classList.add('fade-in');
}在上面的代码中，使用 async/await 等待 1 秒钟后，再将新创建的元素添加到页面中，并添加 fade-in 类名，实现渐变效果。
总结
async/await 是一种更加简单、直观的异步编程方式，它可以让异步代码看起来像同步代码一样，使得代码逻辑更加清晰、易于理解。在前端开发中，它可以应用于处理网络请求、DOM 操作等常见场景，可以大大提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567bbc2d2f5e1655d093fcc