在 JavaScript 开发中，Promise 是一种非常常见的异步编程方式。但是，Promise 的链式调用和回调函数嵌套会导致代码可读性变差，调试困难等问题。而 ES8 引入的 async/await 操作符则能够优雅地解决这些问题。
async/await 简介
async/await 是 ES8 中新增的语法，它是基于 Promise 实现的语法糖，可以让异步代码看起来像同步代码一样。async/await 通过将异步操作转化为同步操作，使得代码的可读性和可维护性都得到了大幅提升。
async/await 的使用方法非常简单，只需要在 async 函数中使用 await 关键字来等待异步操作完成即可。例如：
async function fetchData() {
const data = await fetch('http://example.com/data');
return data.json();
}在上面的代码中，fetchData 函数是一个 async 函数，它使用了 await 关键字来等待 fetch 函数返回结果。当 fetch 函数返回结果后，await 关键字会将结果赋值给 data 变量。
async/await 的优势
async/await 相较于 Promise 有以下几个优势：
1. 代码可读性更高
async/await 使得异步操作看起来像同步操作一样，使得代码更加易于理解和阅读。这使得代码的可读性和可维护性都得到了大幅提升。
2. 错误处理更加方便
async/await 可以使用 try/catch 块来捕获异步操作的错误，使得错误处理更加方便。这样，我们就可以像处理同步代码一样处理异步代码的错误。
3. 可以使用同步编程的方式编写异步代码
使用 async/await，我们可以像编写同步代码一样编写异步代码。这样，我们就可以避免 Promise 的链式调用和回调函数嵌套，使得代码更加简洁和易于维护。
async/await 的示例代码
下面是一个使用 async/await 的示例代码，它从 GitHub API 中获取用户的信息：
// javascriptcn.com 代码示例
async function getUserInfo(username) {
try {
const user = await fetch(`https://api.github.com/users/${username}`);
const repos = await fetch(`https://api.github.com/users/${username}/repos`);
const userInfo = await user.json();
const reposInfo = await repos.json();
return { userInfo, reposInfo };
} catch (error) {
console.error(error);
}
}
getUserInfo('github')
.then(({ userInfo, reposInfo }) => {
console.log(userInfo);
console.log(reposInfo);
})
.catch(error => console.error(error));在上面的代码中，我们定义了一个 async 函数 getUserInfo，它使用了 await 关键字来等待异步操作完成。当异步操作完成后，我们将获取到的数据返回给调用者。
在调用 getUserInfo 函数时，我们使用了 then 方法来处理返回的数据，同时使用 catch 方法来处理异步操作的错误。
总结
async/await 是 ES8 中新增的语法，它可以使异步代码看起来像同步代码一样，从而提高代码的可读性和可维护性。使用 async/await，我们可以使用同步编程的方式编写异步代码，避免 Promise 的链式调用和回调函数嵌套。同时，async/await 还可以方便地处理异步操作的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65709ac1d2f5e1655d94735d