回调函数地狱、Promise-链式调用、

黑马程序员的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>

运行结果如下：

image

image

 

posted @ 2026-01-27 12:49  chenlight  阅读(3)  评论(0)    收藏  举报