第一章 promise

回调地狱

<div id="app"></div>
<h2>列表数据</h2>
<p class="dp"></p>
<audio src="" controls></audio>
    <script>
        /* 1.华语中的第一条数据 */
        var url = 'http://192.168.4.18:3000/top/playlist/?cat=华语'
        $.ajax({
            url,
            success:res=>{
                var {name,id} = res.playlists[0]
                $("#app").html(name)
                /* 2.列表页数据 */
                var listUrl = `http://192.168.4.18:3000/playlist/detail?id=${id}`
                $.ajax({
                    url:listUrl,
                    success:res=>{
                        var {name,id} = res.playlist.tracks[0]
                        $(".dp").html(name)
                        /* 3.根据id获取音乐播放器的url连接 */
                        var musicUrl = `http://192.168.4.18:3000/song/url?id=${id}`
                        $.ajax({
                            url:musicUrl,
                            success:res=>{
                                let src = res.data[0].url
                                $("audio").attr("src",src)
                            }
                        })
                    }
                })
            }
        })
    </script>

promise

Promise对象:代表了未来某个将要发生的事件(通常是一个异步操作)
好处:有了promise对象,可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(回调地狱)

1.promise原理

promise有两种状态  成功/失败
    resolve函数处理成功的情况
  reject函数处理失败的情况

       const promise = new Promise((resolve, reject) => {
            resolve(2);
            reject(3);
        })
        promise.then(res => {
            console.log(res);
        }, err => {
            console.log(err);
        })