随着 JavaScript 语言的不断发展，异步编程已经成为了前端开发中不可避免的一部分。Promise 是一种用于解决异步编程的工具，但是在使用 Promise 的过程中，我们经常会遇到一些繁琐的问题。async-await 是 ES7 中引入的一种新的异步编程方式，它可以让 Promise 更加简单易用。
什么是 async-await
async-await 是一种基于 Promise 的异步编程方式。它可以让我们以同步的方式编写异步代码，将异步代码的执行顺序变得更加清晰明了，同时也可以让我们更加方便地处理 Promise 的返回结果。
async-await 的核心是两个关键字：async 和 await。其中，async 关键字用于声明一个函数是异步的，而 await 关键字用于等待一个 Promise 对象的结果。
如何使用 async-await
使用 async-await 非常简单，只需要在函数前面加上 async 关键字，然后在需要等待 Promise 对象的地方使用 await 关键字即可。
下面是一个使用 async-await 的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在上面的代码中，fetchData 函数是一个异步函数，它使用了 async 关键字进行声明。在 fetchData 函数中，我们使用了 await 关键字等待了两个 Promise 对象的结果：fetch 和 response.json。当 Promise 对象的结果返回后，我们可以直接使用它们的值，而不需要像 Promise 那样使用 then 方法来处理返回结果。
async-await 的错误处理
在使用 async-await 的过程中，我们也需要注意错误处理。如果一个 Promise 对象被 reject，那么我们可以使用 try-catch 语句来捕获这个错误。下面是一个使用 async-await 进行错误处理的示例代码：
// javascriptcn.com 代码示例
async function fetchData() {
try {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
throw error;
}
}
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});在上面的代码中，我们使用了 try-catch 语句来捕获了 fetchData 函数中的错误，并在 catch 中进行了错误处理。如果 fetchData 函数中出现了错误，它会抛出一个异常，然后在调用 fetchData 函数的地方再次进行错误处理。
async-await 的优点
使用 async-await 有以下几个优点：
- 简化了异步编程：async-await 可以让我们以同步的方式编写异步代码，使得代码的执行顺序更加清晰明了。
- 更加易读易懂：相比于 Promise，async-await 的代码更加简洁易读，减少了代码的嵌套层次。
- 更加方便的错误处理：使用 try-catch 语句可以更加方便地进行错误处理。
总结
async-await 是一种基于 Promise 的异步编程方式，它可以让我们以同步的方式编写异步代码，使得代码更加简洁易读。在使用 async-await 的过程中，我们需要注意错误处理，使用 try-catch 语句来捕获错误。async-await 的优点包括简化异步编程、易读易懂、方便的错误处理等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657155e3d2f5e1655da0419d