8.8、回调地狱/ajax迭代

8.8.1、回调地狱

<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)
                        console.log(id)
                        /* 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)
                            }
                        })
                    }
                })
            }
        })

8.8.2、ajax迭代

原生ajax

  var url = "http://192.168.4.18:8000/"
        var xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result  = JSON.parse(xhr.responseText);
                console.log(result)
            }
        }

回调函数封装ajax

function ajax(url,method="get",success) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    success(result)
                }
            }
}
# 需要记住传参的顺序

function ajax({
            url,
            method="get",
            success
        }) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    success(result)
                }
            }
}

jquery-ajax

$.ajax({
            url:"http://192.168.4.18:8000/",
            type:"get",
            dataType:"json",
            success:res=>{
                console.log(res)
            }
})

callback封装jquery-ajax

function http({url,type="get",success}){
            $.ajax({
                url,
                type,
                dataType:"json",
                success:res=>{
                    success(rs)
                }
            })
}

promise封装ajax

function http(url){
            return new Promise((resolve,reject)=>{
               $.ajax({
                   url,
                   type:"get",
                   success:res=>{
                       resolve(res)
                   },
                   error:err=>{
                       reject(err);
                   }
               })
            })
}