async和await解决回调函数地狱

目的：

文件名称：

代码解释：

代码：

使用方法：

结论：

以下是代码的详细介绍，以及如何使用它。

目的：

这个示例展示了如何使用 async 和 await 语法来解决传统回调函数（callback hell）的问题。通过使用 async 和 await，我们可以让异步代码更加简洁易读。代码通过请求API获取省份、城市和地区的列表，并将这些数据填充到HTML的下拉选择框中。

文件名称：

index.html

代码解释：

HTML 部分：
- 在 <body> 中，有一个简单的表单，包含三个 select 元素分别用于显示省份、城市和地区。
- <span> 标签是为了给每个 select 元素提供标签（例如 "省份"、"城市"）。
外部 JavaScript 引用：
- 通过 script 标签引入了 axios 库，这个库用于发送 HTTP 请求并处理响应。
JavaScript 部分：
- 在 <script> 标签内，定义了一个异步函数 getArea()，这个函数的作用是依次获取省份、城市和地区的数据，并将其填充到相应的下拉框中。
- async function getArea()：
  - 该函数是异步的，意味着它会返回一个 Promise 对象，并且可以使用 await 来等待异步操作完成。
- await：
  - 使用 await 关键字来等待 axios 请求的结果。每次请求返回的数据会被赋值给相应的变量 pname（省份）、cname（城市）、area（地区）。
  - 每一次 await 后面的代码都会在前一次请求完成后才执行，从而避免了回调地狱问题。
- axios 请求：
  - 第一个请求从 http://hmajax.itheima.net/api/province 获取省份数据。
  - 第二个请求根据省份名称 pname 获取城市数据。
  - 第三个请求根据省份和城市名称获取地区数据。
- 最后，将获取到的省份、城市和地区名称填充到对应的 select 元素中。
程序运行结果：
- 当页面加载时，getArea() 函数会被调用，依次获取省份、城市和地区的数据。
- 如果成功响应，页面中的三个下拉框将显示省份、城市和地区的名称。
- 如果任何请求失败，页面将不会更新下拉框的内容。

代码（index.html）：

<!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语法，解决回调函数地狱* 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值* 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）*/async function getArea(){const pObj = await axios({url:'http://hmajax.itheima.net/api/province'})const pname = pObj.data.list[0]  // 输出为 省名字const cObj = await axios({url:'http://hmajax.itheima.net/api/city',params:{pname}})const cname = cObj.data.list[0]  // 输出为 市名字const aObj = await axios({url:'http://hmajax.itheima.net/api/area',params:{pname,cname}})const area = aObj.data.list[0]  // 输出为 区名字document.querySelector('.province').innerHTML = pnamedocument.querySelector('.city').innerHTML = cnamedocument.querySelector('.area').innerHTML = area}getArea()</script>
</body></html>