黑马程序员的B站课程：https://www.bilibili.com/video/BV1MN411y7pw?spm_id_from=333.788.videopod.episodes&vd_source=58cc5704c1268f656a4d51980dac6aa7&p=48
涉及回调地狱的代码示例，感觉还是非常具体易懂，就记录下来了，如下：
axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {const pname = result.data.list[0];document.querySelector('.province').innerHTML = pname;// 获取第一个省份默认下属的第一个城市名字axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } }).then(result => {const cname = result.data.list[0];document.querySelector('.city').innerHTML = cname;// 获取第一个城市默认下属第一个地区名字axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } }).then(result => {document.querySelector('.area').innerHTML = result.data.list[0];});});
});说明：
- 该代码使用
axios发起三个连续的 HTTP 请求，分别获取省份、城市和地区的数据。 - 每次请求都基于前一个请求的结果进行下一步操作（即“链式”调用）。
- 使用
document.querySelector()将获取到的数据填充到页面对应的元素中。
Promise-链式调用
使用then函数返回Promise对象特性，一直串联下去。在then回调函数中，return的值会传给then函数生成的新Promise对象；解决回调函数嵌套问题，具体代码如下：
<!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>Promise_链式调用</title>
</head><body><script>/*** 目标：掌握Promise的链式调用* 需求：把省市的嵌套结构，改成链式调用的线性结构*/const p = new Promise((resolve,reject) => {setTimeout(() => {resolve('北京市')},2000)})const p2 = p.then(result => {// console.log(result)return new Promise((resolve,reject) => {setTimeout(()=>{resolve(result + 'zitong')},2000)})})p2.then(result => {console.log(result)})console.log(p2 === p)console.log(p2)</script>
</body></html>运行结果如下：
