在 JavaScript 中，异步编程一直是一个非常重要的话题。在过去，我们通常使用回调函数或者 Promise 来处理异步代码。但是，这些方法都有一些缺陷，例如回调函数嵌套过多，代码难以维护，Promise 写法繁琐等等。为了解决这些问题，ES2017 引入了 async/await。
async/await 是什么？
async 和 await 关键字是 ES2017 中引入的新语法。它们的出现是为了让异步代码更加简洁、易读和易于维护。async 函数是一个返回 Promise 的函数，而 await 表达式会暂停代码的执行，等待 Promise 的解决。
async/await 的优点
简洁易读
async/await 代码更加简洁易读，因为它们允许我们使用类似于同步代码的写法来处理异步操作。这使得代码更加易于理解和维护。
错误处理
使用 async/await，我们可以使用 try/catch 块来处理错误。这使得代码更加健壮和可靠。
避免回调地狱
使用 async/await，我们可以避免回调地狱的问题。我们可以使用类似于同步代码的方式来处理异步操作，而不必嵌套多个回调函数。
async/await 的用法
定义 async 函数
要定义一个 async 函数，只需要在函数前面加上 async 关键字即可。例如：
async function getData() {
// 异步操作
}使用 await 表达式
要使用 await 表达式，只需要在 Promise 前面加上 await 关键字。例如：
async function getData() {
const data = await fetchData();
console.log(data);
}在上面的例子中，fetchData() 是一个异步函数，它返回一个 Promise。使用 await 关键字，我们可以等待 Promise 的解决，并将其结果存储在 data 变量中。
错误处理
使用 try/catch 块来处理错误。例如：
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}在上面的例子中，如果 fetchData() 函数返回一个拒绝的 Promise，代码将跳转到 catch 块中，并输出错误信息。
示例代码
下面是一个完整的示例代码，它使用 async/await 来获取 GitHub 用户的头像图片：
// javascriptcn.com 代码示例
async function getUserAvatar(username) {
try {
const response = await fetch(`https://api.github.com/users/${username}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const userData = await response.json();
const avatarUrl = userData.avatar_url;
const avatarResponse = await fetch(avatarUrl);
if (!avatarResponse.ok) {
throw new Error(`HTTP error! status: ${avatarResponse.status}`);
}
const blob = await avatarResponse.blob();
const img = new Image();
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
} catch (error) {
console.error(error);
}
}
getUserAvatar('octocat');在上面的代码中，我们首先使用 fetch 函数获取 GitHub 用户的 JSON 数据。然后，我们从该数据中提取出头像图片的 URL，并使用 fetch 函数获取该图片。最后，我们将图片添加到页面上。
总结
async/await 是一种更加简洁、易读和易于维护的异步编程方式。它允许我们使用类似于同步代码的写法来处理异步操作。使用 async/await，我们可以避免回调地狱的问题，处理错误更加容易，代码更加健壮和可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c324cd2f5e1655d496fd7