Promise 中如何使用 async await 语法糖
Promise 是 JavaScript 中一种非常重要的异步编程方式，它可以让我们更加方便地处理异步操作。而 async await 语法糖则是 ES2017 中新增的一种语法，可以让我们更加优雅地使用 Promise。
在这篇文章中，我们将会详细介绍如何在 Promise 中使用 async await 语法糖，让我们的异步编程更加简洁和易读。
- async 和 await 的基本使用
在介绍如何在 Promise 中使用 async await 语法糖之前，我们需要先了解一下 async 和 await 的基本使用方式。
async 是一个关键字，用来定义一个异步函数。在异步函数中，我们可以使用 await 关键字来等待 Promise 对象的状态改变。当 Promise 对象的状态变为 resolved 时，await 关键字会返回 Promise 对象的值。
下面是一个简单的使用 async 和 await 的例子：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));在这个例子中，我们定义了一个异步函数 fetchData，在函数中使用 await 关键字等待 fetch 方法返回的 Promise 对象。当 Promise 对象的状态变为 resolved 时，await 关键字会返回 Promise 对象的值，我们可以将其赋值给变量 response。
接着，我们使用 await 关键字等待 response.json() 方法返回的 Promise 对象。当 Promise 对象的状态变为 resolved 时，await 关键字会返回 Promise 对象的值，我们可以将其赋值给变量 data。
最后，我们将 data 返回给调用者，并在调用者中打印出 data。
- 在 Promise 中使用 async await
现在，我们已经了解了 async 和 await 的基本使用方式，下面我们来看一下如何在 Promise 中使用 async await。
在 Promise 中使用 async await 的方式和普通的 async 函数类似，只需要将 Promise 包装成一个异步函数即可。
下面是一个使用 async await 的 Promise 的例子：
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
async function getData() {
const data = await fetchData();
console.log(data);
}
getData();在这个例子中，我们定义了一个包装了 Promise 的异步函数 fetchData，这个函数会在 1 秒钟后返回一个字符串 'data'。
接着，我们定义了一个异步函数 getData，使用 await 关键字等待 fetchData 函数返回的 Promise 对象。当 Promise 对象的状态变为 resolved 时，await 关键字会返回 Promise 对象的值，我们可以将其赋值给变量 data。
最后，我们打印出 data。
- 错误处理
在使用 async await 的时候，我们也需要考虑错误处理的问题。在 Promise 中，我们可以使用 catch 方法来处理错误。而在使用 async await 的时候，我们可以使用 try...catch 语句来捕获错误。
下面是一个使用 async await 的 Promise，并且处理错误的例子：
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('fetchData error'));
}, 1000);
});
}
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.log(error.message);
}
}
getData();在这个例子中，我们定义了一个包装了 Promise 的异步函数 fetchData，这个函数会在 1 秒钟后返回一个错误。
接着，我们定义了一个异步函数 getData，使用 try...catch 语句来捕获 fetchData 函数返回的错误。如果 fetchData 函数返回的 Promise 对象的状态变为 rejected，那么控制流就会跳转到 catch 语句中，我们可以在 catch 语句中打印出错误信息。
- 总结
在本文中，我们学习了如何在 Promise 中使用 async await 语法糖。我们了解了 async 和 await 的基本使用方式，以及如何在 Promise 中使用 async await 和处理错误。
使用 async await 可以让我们的异步编程更加简洁和易读，但是在使用的时候需要注意错误处理的问题。希望本文对你有所帮助！
示例代码：https://codepen.io/pen/?template=VwvpRJO
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65893080eb4cecbf2de6d055