async和await关键字
目录
- async 关键字
- await 关键字
- 使用 async 和 await 解决回调地狱问题
- 错误处理
- 总结
在JavaScript中，
async和
await是用于简化基于
Promise的异步编程的关键字。在ES2017（也称为ES8）中引入后，它们迅速成为管理异步代码的首选方法之一，因为它们可以帮助改善代码的可读性和维护性。
async 关键字
async 关键字用于声明一个异步函数，它是一个返回Promise对象的函数。当函数执行时，如果遇到没有显式返回Promise的代码，async函数会自动将其包装在Promise中。
async函数是使用async关键字声明的函数。async 函数是AsyncFunction 构造函数的实例，并且其中允许使用await 关键字。asyne 和await 关键字让我们可以用一种更简洁的方式写出基于Promise 的异步行为,而无需刻意地链式调用promise。
下面是一个async函数的示例:
async function fetchData() {// 返回值会被包装在Promise中return 'data fetched';
}
调用这个函数实际上返回了一个解析为返回值的Promise。
await 关键字
await关键字仅在async函数内部有效，用于等待一个Promise解决（resolve）并返回Promise成果（fulfilled）的值。它可以让异步代码看起来和同步代码类似，因为你可以按照编写同步代码的方式来顺序地写异步代码。
这里有一个await的例子:
async function fetchData() {let data = await someAsyncOperation(); // 等待Promise解决console.log(data); // 使用Promise解决的结果return 'done';
}
这段代码中，await someAsyncOperation()将会暂停fetchData的执行，直到someAsyncOperation()返回的Promise被解决。
使用 async 和 await 解决回调地狱问题
1.概念：在 async 函数内，使用 await 关键字取代 then 函数，等待获取Promise 对象成功状态的结果值
2.做法：使用 async 和 await 解决回调地狱问题
3.核心代码：
/*** 目标：掌握async和await语法，解决回调函数地狱* 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值* 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
*/
// 1. 定义async修饰函数
async function getData() {// 2. await等待Promise对象成功的结果const pObj = await axios({url: 'http://**/api/province'})const pname = pObj.data.list[0]const cObj = await axios({url: 'http://**/api/city', params: { pname }})const cname = cObj.data.list[0]const aObj = await axios({url: 'http://**/api/area', params: { pname, cname }})const areaName = aObj.data.list[0]document.querySelector('.province').innerHTML = pnamedocument.querySelector('.city').innerHTML = cnamedocument.querySelector('.area').innerHTML = areaName
}getData()
使用 await 替代 then 的方法。
错误处理
在async/await中，可以使用传统的try/catch语句来处理异常，这使得异步代码的错误处理变得更加直观：
async function fetchDataWithErrorHandling() {try {let data = await someAsyncOperation();console.log(data);} catch (error) {console.error('Error fetching data:', error);}
}
try 和 catch 的作用：语句标记要尝试的语句块，并指定一个出现异常时抛出的响应
try {// 要执行的代码
} catch (error) {// error 接收的是，错误消息// try 里代码，如果有错误，直接进入这里执行
}
try 里有报错的代码，会立刻跳转到 catch 中
总结
使用async/await可以编写出更清晰、更类似于同步代码的异步JavaScript程序。它消除了Promise.then()链式调用的需要，从而简化了对异步操作的控制流管理。但要记住，为了保持效率，只有在你需要等待异步操作结果的情况下才应该使用await，否则，你可能会不必要地延迟执行。