promise解决回调地狱问题

什么是回调地狱？如何解决呢、。

可以看B站的视频https://search.bilibili.com/all?keyword=%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1&from_source=webtop_search&spm_id_from=333.794

<!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>Document</title>
    <script type="text/javascript" src="./libs/jquery-3.4.1.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        window.onload = function () {
            console.log(123);
            const ID_BASE_URL = 'https://jsonplaceholder.typicode.com/todos';
            const ROBOT_IMG_BASE_URL = 'https://robohash.org/';


            // 获取机器人id
            function getRobotId(url, callbacks) {
                $.get(url, function (data) {
                    const id = data.id;
                    callbacks(id);
                })
            }

            //创建机器人
            function createRobot(id) {
                const img = document.createElement('img');
                img.src = ROBOT_IMG_BASE_URL + `/${id}?size=200x200`;
                document.body.appendChild(img);
            }

            //回调地狱，一层一层嵌套，看得很难受
            // getRobotId(ID_BASE_URL + '/1', function (id) {
            //     createRobot(id);
            //     getRobotId(ID_BASE_URL + '/2',function(id){
            //         createRobot(id);
            //         getRobotId(ID_BASE_URL + '/3',function(id){
            //         createRobot(id)
            //     })
            //     })
            // });
            

                function getRobotIdPromise(url){
                    const promise = new Promise(
                        (resolve,reject)=>{
                            $.get(url,function(data){
                                const id = data.id;
                                resolve(id);
                        })
                        }
                        )
                        return promise;
}

//promise 平铺开来，只有一层哦
getRobotIdPromise(ID_BASE_URL+'/1').then(function(id){
    createRobot(id);
    return getRobotIdPromise(ID_BASE_URL+'/2')
}).then(
    function(id){
    createRobot(id);
    return getRobotIdPromise(ID_BASE_URL+'/3')}
)
        }
    </script>

</body>

</html>

相关阅读:
40.lombok在IntelliJ IDEA下的使用
 39.Intellij导入子项目时，maven列表子项目灰色不可用---解决方法
 38.IntelliJ IDEA中创建Web聚合项目(Maven多模块项目)
Log4j.properties 属性详解以及 LOG4J日志级别详解
 3.lombok系列3：lombok的实验类特性
 2.lombok系列2：lombok注解详解
 1.lombok系列1：初识lombok
DIV和SPAN的区别
 37.Intellij IDEA解决GBK乱码
 WebService三大基本元素 SOAP WSDL UDDI
原文地址：https://www.cnblogs.com/zhuangdd/p/14698539.html