JavaScript：async函数和await解决回调

听海边涛声

于 2024-07-15 09:35:20 发布

阅读量75

点赞数 2

文章标签： javascript 开发语言 ecmascript async await

本文链接：https://blog.csdn.net/panghuangang/article/details/140428768

版权

介绍

用async和await关键字编写javascript异步代码更加简洁，而且彻底解决回调地狱的问题。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

async 函数声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于promise 的异步代码，并且避免了显式地配置 promise 链的需要。
await 操作符用于等待一个 Promise 兑现并获取它兑现之后的值。它只能在异步函数或者模块顶层中使用。
在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。
await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）。

示例

下面示例中，用async + await 关键字，简化异步调用，实现获取省份数据、城市数据、地区数据：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async函数和await_解决回调函数地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
    */
    //  1. 定义async修饰的函数
    async function getData() {
      // 2. await等待Promise成功的结果
      // 获取省份数据
      const pObj = await axios({ url: 'https://hmajax.itheima.net/api/province' })
      console.log('省份请求返回：')
      console.log(pObj)
      const pname = pObj.data.list[0]

      // 根据省份获取城市
      const cObj = await axios({ url: 'https://hmajax.itheima.net/api/city', params: { pname } })
      console.log('返回省份下的城市数据：')
      console.log(cObj)
      const cname = cObj.data.list[0]

      // 根据省份、城市获取地区
      const aObj = await axios({ url: 'https://hmajax.itheima.net/api/area', params: { pname, cname } })
      console.log('根据省份、城市获取地区数据的返回：')
      console.log(aObj)
      const areaName = aObj.data.list[0]

      document.querySelector('.province').innerHTML = pname
      document.querySelector('.city').innerHTML = cname
      document.querySelector('.area').innerHTML = areaName
    }
    getData()
  </script>
</body>

</html>