在前端开发中，异步操作是非常常见的。在 ES6 中，我们可以使用 Promise 来处理异步操作，但是 Promise 的链式调用和错误处理方式并不是很优雅。而在 ES8 中，async/await 的出现让异步操作更加优雅。
什么是 async/await？
async/await 是一种基于 Promise 的异步编程方式。async/await 让我们可以使用同步的方式来处理异步操作，使得异步代码更加易于阅读和维护。
async/await 的核心是 async 函数和 await 表达式。
async 函数是一个返回 Promise 对象的函数。在 async 函数中，我们可以使用 await 表达式来等待 Promise 对象的结果。当 Promise 对象状态变为 resolved 时，await 表达式就会返回 Promise 对象的值。如果 Promise 对象状态变为 rejected，await 表达式就会抛出错误。
下面是一个简单的示例：
async function fetchData() {
const response = await fetch('https://api.github.com/users/octocat');
const data = await response.json();
console.log(data);
}
fetchData();在这个示例中，fetchData 函数是一个 async 函数，它使用 await 表达式等待 fetch 函数返回的 Promise 对象。当 Promise 对象状态变为 resolved 时，await 表达式就会返回 response.json() 的结果，也就是 Github 用户 octocat 的信息。
async/await 和 Promise 的区别
使用 async/await 和 Promise 都可以处理异步操作，它们的区别在于：
- 语法上的区别：async/await 使用 async 函数和 await 表达式，Promise 使用 then 方法和 catch 方法。
- 错误处理上的区别：使用 async/await，我们可以使用 try/catch 语句来处理错误，而使用 Promise，我们需要使用 catch 方法来处理错误。
async/await 的优点
async/await 有以下优点：
- 代码更加清晰易懂：使用 async/await，我们可以使用同步的方式来处理异步操作，使得代码更加易于阅读和维护。
- 错误处理更加方便：使用 async/await，我们可以使用 try/catch 语句来处理错误，使得错误处理更加方便。
- 更加优雅的链式调用：使用 async/await，我们可以使用更加优雅的链式调用方式来处理异步操作。
下面是一个使用 async/await 的链式调用示例：
// www.javascriptcn.com code example
async function fetchData() {
try {
const response1 = await fetch('https://api.github.com/users/octocat');
const data1 = await response1.json();
const response2 = await fetch(data1.repos_url);
const data2 = await response2.json();
console.log(data2);
} catch (error) {
console.log(error);
}
}
fetchData();在这个示例中，我们使用了 try/catch 语句来处理错误，并且使用了链式调用的方式来处理异步操作。这种方式使得代码更加易于阅读和维护。
async/await 的注意事项
使用 async/await 时，需要注意以下事项：
- async 函数返回的是一个 Promise 对象，因此需要使用 then 方法来获取它的返回值。
- await 只能在 async 函数内部使用，否则会报错。
- await 表达式只能等待 Promise 对象，否则会直接返回结果。
- 如果多个 await 表达式之间没有依赖关系，可以使用 Promise.all 方法来并行执行它们，提高代码的执行效率。
下面是一个使用 Promise.all 方法的示例：
// www.javascriptcn.com code example
async function fetchData() {
try {
const [data1, data2] = await Promise.all([
fetch('https://api.github.com/users/octocat').then(response => response.json()),
fetch('https://api.github.com/users/octocat/repos').then(response => response.json())
]);
console.log(data1, data2);
} catch (error) {
console.log(error);
}
}
fetchData();在这个示例中，我们使用了 Promise.all 方法来并行执行两个异步操作，并且使用了数组解构来获取它们的结果。
结语
async/await 是一种非常优雅的异步编程方式。它让我们可以使用同步的方式来处理异步操作，使得代码更加易于阅读和维护。在实际开发中，我们可以使用 async/await 来处理异步操作，提高代码的执行效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0fe15a941bf7134225fee