前言
在 JavaScript 的异步编程中，我们经常会用到回调函数、Promise 和 Generator 等方式来处理异步操作。然而，这些方式都有各自的限制和缺点，使得异步编程变得复杂和难以维护。为了解决这个问题，ES8 引入了 async/await，这是一种更加简单和直观的异步编程方式。
async/await 简介
async/await 是 ES8 中新增的语法，用于简化异步编程。async 函数返回一个 Promise 对象，而 await 表达式可以暂停 async 函数的执行，等待 Promise 对象的状态发生改变后再继续执行。
async/await 的优点在于：
- 代码更加简洁和易读，减少了回调函数和 Promise 的嵌套。
- 异常处理更加方便和直观，可以使用 try/catch 语句处理异步操作中的异常。
- 可以使用同步的方式编写异步代码，使得代码更加符合人类的思维方式。
下面是一个简单的示例代码，使用 async/await 实现异步操作：
// www.javascriptcn.com code example
async function getData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}
getData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在上面的代码中，我们定义了一个 async 函数 getData，它使用 await 表达式等待 fetch 和 response.json 方法返回 Promise 对象。当 Promise 对象的状态改变后，getData 函数会返回一个包含数据的 Promise 对象。我们可以使用 then 方法处理 Promise 对象的返回值，也可以使用 catch 方法处理 Promise 对象的异常。
async/await 的进阶用法
除了基本的 async/await 用法，它还有一些进阶用法，使得异步编程更加灵活和强大。
1. 并行执行多个异步操作
在某些情况下，我们需要同时执行多个异步操作，并在它们都完成后才进行下一步操作。这时，我们可以使用 Promise.all 方法和 async/await 结合使用，实现并行执行多个异步操作的效果。
下面是一个示例代码，使用 Promise.all 和 async/await 实现并行执行多个异步操作：
// www.javascriptcn.com code example
async function getData() {
const [usersResponse, reposResponse] = await Promise.all([
fetch('https://api.github.com/users'),
fetch('https://api.github.com/repositories')
]);
const users = await usersResponse.json();
const repos = await reposResponse.json();
return { users, repos };
}
getData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在上面的代码中，我们使用 Promise.all 方法同时发起了两个异步请求，等待它们都完成后再进行下一步操作。这样可以减少等待时间，提高代码的效率。
2. 处理超时和错误
在异步编程中，我们经常需要处理异步操作的超时和错误。async/await 提供了一种简单和直观的方式来处理这些情况，使用 try/catch 语句捕获异常并进行处理。
下面是一个示例代码，使用 try/catch 语句处理异步操作的超时和错误：
// www.javascriptcn.com code example
async function getData() {
try {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
throw new Error('Failed to fetch data');
}
}
async function fetchData() {
try {
const data = await getData();
console.log(data);
} catch (error) {
console.error(error);
}
}
setTimeout(() => {
console.log('Timeout!');
}, 3000);
fetchData();在上面的代码中，我们定义了一个 async 函数 getData，使用 try/catch 语句处理异步操作的异常。如果异步操作失败，getData 函数会抛出一个错误，然后由 fetchData 函数捕获并处理。
此外，我们还使用了 setTimeout 方法模拟异步操作的超时情况。当 fetchData 函数执行超过 3 秒时，会输出 Timeout!。
结语
async/await 是一种更加简单和直观的异步编程方式，可以大大提高代码的可读性和可维护性。在实际开发中，我们可以根据需求灵活使用 async/await 的基本用法和进阶用法，使得异步编程更加高效和优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d41383a941bf71347b94a5