引言
对于前端开发者来说，使用异步函数已经是一种不可或缺的方式，async/await就是ES7中出现的一种新型的异步函数写法，极大地简化了异步代码的写法，将异步变得更加易读易懂。本文将详细介绍ES7中async/await的使用及其优缺点，并提供示例代码。
async/await 使用
定义异步函数
ES7中的异步函数可以通过async关键字来定义：
async function fetchData() {
// 异步操作
return result;
}使用异步函数
异步函数的使用方式与普通函数相同，可以通过调用函数名并使用await关键字来等待异步操作完成：
async function getData() {
const result = await fetchData();
console.log(result);
}多个异步函数
如果需要依次执行多个异步函数，可以使用Promise.all()方法实现：
async function getData() {
const [result1, result2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(result1, result2);
}优点
简化异步代码
async/await 可以极大地简化异步代码的编写，使其与同步代码的写法相似。使得代码更易读、易懂。
更清晰的错误处理
使用 async/await，我们可以使用 try/catch 来捕获异步操作中的错误，可以有效地解决callback的错误处理。
async function getData() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
}
}缺点
语法不够简洁
虽然 async/await 简化了异步代码，但是语法并不那么简洁，由于需要等待异步操作结束，所以需要使用await关键字，会增加代码量。
可读性需提高
将多个异步操作串联起来是一件非常好的事情。但是，当存在较多嵌套的异步操作时，代码就会变得非常混乱。在进行复杂的操作时，我们需要格外注意代码的可读性。
异常处理
在异步请求的执行过程中，如果发生了错误，那么该异常将会被异步函数捕获，如果没有合适的错误处理方法，就会产生代码错误。需要合理地进行错误处理。
示例代码
基本示例
// javascriptcn.com 代码示例
async function getData() {
const result = await fetchData();
console.log(result);
}
async function fetchData() {
const response = await fetch('/api/data');
const data = await response.json();
return data;
}多个异步示例
// javascriptcn.com 代码示例
async function getData() {
const [result1, result2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(result1, result2);
}
async function fetchData1() {
const response = await fetch('/api/data1');
const data = await response.json();
return data;
}
async function fetchData2() {
const response = await fetch('/api/data2');
const data = await response.json();
return data;
}总结
通过本文的介绍，我们了解了ES7中async/await的使用及其优缺点，与callback、Promise的方式相比，它的简洁性和可读性得到很大的提升。在实际编写代码时，我们需要适合场景来合理地使用异步方式，尽可能地使我们的代码更加清晰易读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583a853d2f5e1655de7f4dd