1、什么是Promise

1-1.then()方法

<script>
        // promise
        /* 
        1、什么是promise  监听器
         */ 
        /* 
        怎么样实现一个promise   new
        promise函数中传递两个参数
        resolve -->处理成功     then函数去触发resolve
        reject  -->处理失败     catch函数去触发reject
        这两个函数不会马上执行
        then和catch只会触发一个
         */  
        var p = new Promise((resolve,reject)=>{
            resolve("success");
            reject("error")
        })
        console.log(p);
        p.then(res=>{
            console.log(res);
        })
        p.catch(res=>{
            console.log(res)
        })
    </script>

1-2.catch()方法

<script>
        /* catch
        1、resolve
        */
        var p = new Promise((resolve,reject)=>{
            // resolve("1");
            reject("2")
        })
        p.catch(res=>{
            console.log(res)
        })
    </script>

2、什么是回调地狱

两段http请求存在依赖，嵌套关系的时候就会造成回调地狱

<script>
        /* 两段http请求存在依赖，嵌套关系的时候就会造成回调地狱 */
        var url = `http://47.108.197.28:3000/top/playlist`;
        $.ajax({
            url,
            success:res=>{
                var {name,coverImgUrl,id} = res.playlists[0];
                $("#name").html(name)
                $("img").attr("src",coverImgUrl)
                var url = `http://47.108.197.28:3000/playlist/detail?id=${id}`;
                $.ajax({
                    url,
                    success:res=>{
                        var detail = res.playlist.description;
                        $("#detail").html(detail)
                    }
                })
            }
        })
    </script>

3、Promise解决

promise其实就是为了方便程序员阅读代码
本质上就是为了替代回掉函数的

<script>
        /* promise其实就是为了方便程序员阅读代码
        本质上就是为了替代回掉函数的
         */
        var url = `http://47.108.197.28:3000/top/playlist`;
        http(url).then(res=>{
            var id = res.playlists[0].id;
            return id;
        }).then(id=>{
            var url = `http://47.108.197.28:3000/playlist/detail?id=${id}`;
            http(url).then(res=>{
                console.log(res);
            })
        })
    </script>