then和$.when在ajax中的使用

then

在then中可以分别注册，成功，失败，进行中的函数。在Jq的链式调用then的时候，只有返回一个promise时，下一个then注册的回调函数才能使用回调结果，否则只会依次触发回调函数而没有回调结果。

案例：
不用then

   $.ajax({
       url:'https://autumnfish.cn/api/hero/simple',
       type:'get',
       data:{
           name:'提莫'
       },
       success:function(res){
           if(res){
                $.ajax({
                    url:'https://autumnfish.cn/api/hero/info',
                    type:'get',
                    data:{
                        name:'提莫'
                    },
                    success:function(res){
                        if(res.name){
                            $.ajax({
                                url:'https://autumnfish.cn/api/hero/detail',
                                type:"get",
                                data:{
                                    name:'提莫'
                                },
                                success:function(res){

                                },
                                error:function(err){

                                }
                            })
                        }
                    },
                    error:function(err){

                    }
                })
           }
       },
       error:function(err){
           console.log(err)
       }
   })

以上结构无逻辑问题，但是结果嵌套比较深，难以维护。

使用then

 	   $.ajax({       
            url:'https://autumnfish.cn/api/hero/simple',
            type:'get',
            data:{ name:'提莫'}
       })
       .then(
           function (res) {
           return $.ajax({
               url: 'https://autumnfish.cn/api/hero/info',
               type: 'get',
               data: {
                   name: '提莫'
               }})

           },
           function(err){

           }
       )
       .then(
           function (res) {
           return $.ajax({
               url: 'https://autumnfish.cn/api/hero/detail',
               type: "get",
               data: {
                   name: '提莫'
               },
           })

           },function(err){

           }
        )
       .then(
           function(res){

            console.log('最后一个请求',res)

           },
           function(err){
               
           }
       )

把ajax方法的success,error方法用then注册，可以提高可阅读性，减低维护难度。并且由于ajax方法本身就返回一个promise，所以可以使用then链式调用，代码结构也比较好看。

$.when

$.when(fn1,fn2,…fn).then(successFn,erroFn) 这是使用的语法。只有当when里面的所有函数成功执行完毕，才会调用then里面的回调。
异步函数只有返回promise，并且有状态返回时候，才算为执行执行完毕。
非异步函数调用后都视为执行成功。

案例：

    var fn1 = function(){
        return $.ajax({
            url:'https://autumnfish.cn/api/hero/simple',
            type:'get',
            data:{name:'提莫'}
        })
    }

    var fn2 = function(){
        return $.ajax({
            url:'https://autumnfish.cn/api/hero/info',
            type:'get',
            data:{name:'提莫'},
        })
    }
	
    var fn3 = function(){
        return $.ajax({
            url:'https://autumnfish.cn/api/hero/detail',
            type:'get',
            data:{name:'提莫'},
        })        
    }
	
	//非异步
	var fn4 = function(){
		console.log('执行非异步')
	}
	
    $.when(fn1(),fn2(),fn3(),fn4())
    .then(
        function(res){

            //成功

        },
        function(error){

            //失败

        }
    )

以上使用的ajax测试地址都转载自：ajax的常用api测试