jQuery使用（十二）：工具方法之ajax的无忧回调（优雅的代码风格）

• jQuery.ajax()方法的应用
• jQuery.ajax()的无忧回调（优雅的代码风格）

 一、jQuery.ajax()方法的应用

jQuery.ajax()实质上就是在ajax的基础上进行了封装，将参数设置，方法调用，数据传输，响应的回调函数等都封装到一个对象中，然后使用这个对象作为jQurey.ajax()的参数调用实现统一配置执行的效果。

jQuery.ajax(object)中的object的常用属性及设置：

• url：请求地址
• type：HTTP的请求方法
• success:请求成功的处理函数（响应的数据会被转换成对象传入处理函数）
• error：当请求失败的处理函数，会传入一个提示对象，其中obj.status为状态码，obj.statusText表示状态说明。
• complete:请求完成以后（无论成功还是失败）的处理函数
• context:改变函数上下文
• timeout:设置本地的请求超时时间（以毫秒计）。
• async:请求采用异步还是同步执行（默认异步）
• dataType:预期的服务器响应的数据类型（json）。

 1.Easy Mock模拟jQuery.ajax()请求：

$.ajax({
    url:'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
    type:"GET",
    success:function(res){
        $.each(res.data,function(index,ele){
            console.log(ele);
        })
    },
    error:function(e){
        if(e.status == 404){
            console.log("我找不到主人要的宝贝。。。哇呜。。。");
        }
    },
    complete:function(){
        console.log("我完成了任务，快夸我，夸我的人都长得好。");
    }
});

2.使用context改变函数执行的上下文示例：

//html
<div class="wrapper"></div>
//js
$.ajax({
    url:'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
    type:"GET",
    success:function(res){
        console.log(this);////init [div.wrapper, prevObject: init(1), context: document, selector: ".wrapper"]
    },
    context:$('.wrapper'),
    complete:function(){
        console.log(this)//init [div.wrapper, prevObject: init(1), context: document, selector: ".wrapper"]
    }
});

 二、jQuery.ajax()的无忧回调（优雅的代码风格）

通过第一部分的分析，好像jQuery.ajax已经全部学会了，no...

对于一个简单的网络请求来说，第一部分无可厚非已经足以，但是在实际开发中，复杂的需求伴随着的是复杂的代码结构和网络情况，如果存在多个网络请求嵌套请求的情况，代码会出现死亡三角的复杂区域，对于后期维护会造成非常大的麻烦。为了更友好的开发维护，jQuery.ajax提供了强大的解决方案，就是jQuery.ajax请求会返回一个Deferred.promise()方法，这个方法提供了友好的ajax不同完成状态的回调函数的添加接口。可能到这里你还不知道我在说什么，接下来看下面这个需求的由ajax产生的死亡三角和其解决方案的两份代码你就明白了，由于篇幅比较大，我将需求和死亡三角代码折叠，提供最后优雅的代码展示：

<!-- 一、基础说明
code/    code为0时表示正常状态，msg为Ok
msg /    code为非0时表示异常状态,msg为error
data/    接口返回实体数据
二、实体对象
power:
名称    /    类型/        备注
Power/    String/      权限
movieList:
名称      / 类型  /  备注
name  /    String/    电影名字
poster/    String/    电影封面
id    /    String/    电影id
movieInfo:
名称           /    类型             /  备注
name       /    String       /    电影名字
poster     /    String       /    电影封面
direct     /    String       /    导演
screewriter/    Array<string>/    编剧
mainActior /    Array<string>/    主演
gut           /    String         /  剧情
三、接口文档
1.权限
BaseUrl：https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie
URL:/power
Type：POST
Request:
名称        /   类型      / 备注
Username/    String/    用户名
Password/    String/    密码
Response:
{
    code:0
    msg:OK
    data:power
}

2.电影列表
BaseUrl:https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie
URL:/movieList
Type:GET
Response:
{
    code:0
    msg:OK
    data：Array <movieList>
} 

3.电影详情
BaseUrl:https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie
URL:/movieInfo
Type:GET
Request:
名称       /    类型      /  备注
movieId/    Number/     电影的ID
Response:
{
    code:0
    msg:OK
    data:movieInfo
}

<style type="text/css" media="screen">
    *{
        padding: 0px;
        margin: 0px auto;
    }
    .tpl{
        display: none;
    }
    .wrapper{
        overflow: hidden;
        border: 2px solid black;
        width: 600px;
        margin: 100px auto 0px;
    }
    .movieSection{
        float: left;
        width: 180px;
        height: 180px;
        padding: 10px;
    }
    .movieSection img{
        width: 100%;
        height: 150px;
        cursor: pointer;
    }
    .movieSection h3{
        height: 30px;
    }
</style>
<div class="wrapper">
    <div class="tpl">
        <img src="">
        <h3 class="movieName"></h3>
    </div>
</div>
<script>
    //
    $.ajax({
        url:'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power',
        type:"POST",
        data:{
            username:"cst",
            password:"123123"
        },
        success:function(res){
            if(res.data.power == 'root'){
                //vip 网络地址发送请求
                $.ajax({
                    url:'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
                    type:'GET',
                    success:function(res){
                        var data = res.data;
                        var $Wrapper = $('.wrapper');
                        $.each(data,function(index,ele){
                            // ele.name ele.poste
                            var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
                            $MovieSection.data({id:ele.id}).on('click',function(){
                                $.ajax({
                                    url:"https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo",
                                    type:'GET',
                                    data:{
                                        movieId:$(this).data('id')
                                    },
                                    success:function(res){
                                        var data = res.data;
                                        var direct = data.direct;
                                        var gut = data.gut;
                                        var mainActor = data.mainActor;
                                        var screenWriter = data.screenwriter;
                                        var htmlStr = '<div class="mask">
                                            <p>导演：'+ direct +'</p>
                                            <p>主演：'+ mainActor.reduce(function(prev,curv){
                                                prev += curv + "&nbsp;&nbsp;";
                                                return prev;
                                            }) +'</p>
                                            <p>编剧：'+ screenWriter.reduce(function(prev,curv){
                                                prev += curv + "&nbsp;&nbsp;";
                                                return prev;
                                            }) +'</p>
                                            <p>剧情：'+ gut +'</p>
                                        </div>';
                                        console.log(htmlStr);
                                        $(htmlStr).appendTo('body')
                                            .css({position:'absolute',left:$(window).outerWidth()/2,bottom:100,400,marginLeft:-200,top:505});
                                    }
                                });
                            }).children()
                                .eq(0).attr('src',ele.poster)
                                    .next().text(ele.name);
                            $Wrapper.append($MovieSection);
                        });
                    }
                });
            }else{
                //非vip
            }
        }
    });
</script>

通过上面的【回调地狱】就有一个值得思考的问题了，如何避免这种代码带来的负面影响呢？可以参考另一篇博客：jQuery使用（）：Deferred有状态的回调列表（含源码）如果要完整的解析整个jQuery.ajax解决这种【回调地狱】的问题就相当于要将jQuery.Deferred的实现机制全部解析一篇，所以这里就不再赘述了。用最简单的描述就是当通过jQuery.ajax()创建一个请求时，jQuery.ajax()会返回一个jQuery.Deferred对象，更准确的说是会返回Deferred.promise对象，这样就可以通过在外部接收这个对象，promise对象上包含了一系列的异步状态的回调函数的注册方法done、fail、progress、then。这些方法的具体使用参考前面那篇博客，下面我通过then方法来改造上面那段【回调地狱】的代码：

$.ajax({
    url:'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/power',
    type:"POST",
    data:{
        username:"cst",
        password:"123123"
    }
//请求会员资源--电影列表
}).then(function(res){
    if(res.data.power == 'root'){
        //vip 网络地址发送请求
        return $.ajax({
            url:'https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieList',
            type:'GET'
        });
    }
//
}).then(function(res){
    var data = res.data;
    var $Wrapper = $('.wrapper');
    var df = $.Deferred();
    $.each(data,function(index,ele){
        // ele.name ele.poste
        var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
        $MovieSection.data({id:ele.id})
            .on('click',function(){
                df.resolve($(this));
            })
                .children()
                    .eq(0).attr('src',ele.poster)
                        .next().text(ele.name);
        $Wrapper.append($MovieSection);
    });
    return df.promise();
}).then(function(dom){
    return $.ajax({
        url:"https://easy-mock.com/mock/5c09f40d3c098813c612cce6/movie/movieInfo",
        type:'GET',
        data:{
            movieId:dom.data('id')
        }
    })
}).then(function(res){
    console.log(res);
    var data = res.data;
    var direct = data.direct;
    var gut = data.gut;
    var mainActor = data.mainActor;
    var screenWriter = data.screenwriter;
    var htmlStr = '<div class="mask">
        <p>导演：'+ direct +'</p>
        <p>主演：'+ mainActor.reduce(function(prev,curv){
            prev += curv + "&nbsp;&nbsp;";
            return prev;
        }) +'</p>
        <p>编剧：'+ screenWriter.reduce(function(prev,curv){
            prev += curv + "&nbsp;&nbsp;";
            return prev;
        }) +'</p>
        <p>剧情：'+ gut +'</p>
    </div>';
    console.log(htmlStr);
    $(htmlStr).appendTo('body')
        .css({position:'absolute',left:$(window).outerWidth()/2,bottom:100,400,marginLeft:-200,top:505});
});

上面改造后的代码也就是开发中需要遵循的单一职责原则。