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 = pname
  document.querySelector('.city').innerHTML = cname
  document.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，否则，你可能会不必要地延迟执行。