引言
在过去，JavaScript 中异步编程有很多种方式，例如回调、Promise 等，并不是很友好。ES8 中新增了异步编程的语法糖——async/await。使用异步编程可以提高用户体验和程序性能，让代码更加简洁易读。本文将详细介绍 ES8 中的 async/await，以及其在实际开发中的应用。
async/await 的基本使用
async/await 是 ECMAScript 2017 的标准之一，是在 Promise 基础上所添加的语法糖。在 ES8 中，async/await 可以让我们更加容易地管理异步代码，使得异步操作更加优雅和简单，并且也不需要使用使用回调或 Promise。
首先，我们先来看一个 async 函数的例子，这个函数返回一个 Promise，我们可以使用 await 来等待 Promise 结果的返回：
// javascriptcn.com 代码示例
async function fetchUserInfo(userId) {
const response = await fetch(`https://api.example.com/user/${userId}`);
const data = await response.json();
return data;
}
fetchUserInfo(123)
.then(data => console.log(data))
.catch(error => console.error(error));上述代码我们定义了一个 fetchUserInfo 函数，这个函数使用了 await 关键字，而不是 Promise 的 then 和 catch 方法。这个函数返回的是一个 Promise 对象，我们可以使用 then 方法来获取函数执行结果。
async 函数会隐式地返回一个 Promise 对象，因此我们也可以直接使用 Promise 的语法给 async 函数添加回调函数：
// javascriptcn.com 代码示例
async function fetchUserInfo(userId) {
const response = await fetch(`https://api.example.com/user/${userId}`);
const data = await response.json();
return data;
}
fetchUserInfo(123)
.then(data => console.log(data))
.catch(error => console.error(error));上述代码同样会输出请求的结果。
async/await 示例
在实际开发中，async/await 更加清晰、简洁，使用效果更加媲美同链式调用相比的 Promise，让我们看几个具体的例子：
1. 嵌套的异步函数
使用 async/await，我们可以解决嵌套的异步函数，代码也变得更加易读：
// javascriptcn.com 代码示例
async function getUserDetail(userId) {
const userInfo = await getUserInfo(userId);
const userDetail = await getUserOrderDetail(userInfo.orderId);
return userDetail;
}
async function getUserInfo(userId) {
const response = await fetch(`https://api.example.com/user/${userId}`);
const data = await response.json();
return data;
}
async function getUserOrderDetail(orderId) {
const response = await fetch(`https://api.example.com/order/${orderId}`);
const data = await response.json();
return data;
}
getUserDetail(123)
.then(data => console.log(data))
.catch(error => console.error(error));上述代码将三个异步函数，进行了串行化的处理，让代码更加结构清晰，操作也更加易读。
2. 并行处理多个异步操作
在前端开发中，有时候我们需要并行地去请求多个接口。我们可以使用 Promise.all() 去执行多个异步操作，然后使用 await 统一等待结果：
// javascriptcn.com 代码示例
async function fetchUserInfoAndOrderDetail(userId) {
const [userInfoResponse, orderDetailResponse] = await Promise.all([
fetch(`https://api.example.com/user/${userId}`),
fetch(`https://api.example.com/order/${orderId}`),
]);
const userInfo = await userInfoResponse.json();
const orderDetail = await orderDetailResponse.json();
return { userInfo, orderDetail };
}
fetchUserInfoAndOrderDetail(123)
.then(data => console.log(data))
.catch(error => console.error(error));上述代码我们使用 Promise.all() 并行地发送多个请求，然后等待所有结果返回，使用 await 关键字同步请求的结果。
async/await 的指导意义
async/await 让 JavaScript 同其它语言一样拥有了一种新的编程方式。使用 async/await 可以加强代码结构的整洁性，提高代码的可读性和可维护性。在一些复杂的业务逻辑场景下，使用 async/await 可以更优雅地处理异步代码。
async/await 也可以用来管理流程控制，让代码易于编写和调试。异步处理是 JavaScript 开发中的常见问题之一，async/await 提供另一个选择来处理异步代码，避免传统回调的深层嵌套和 Promise API 过于复杂的问题。
总结
async/await 带来了对于异步编程的革新，使用更加方便，代码更加易读，也使得 JavaScript 有了一种更像同步代码的写法，增强了开发体验。虽然 async /await 不是一项完美的技术，但它在应对现代前端的异步编程需求时，也无疑是一项具有深刻指导意义的技术。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65839154d2f5e1655de6f375