ajax请求多个url解决办法-鲍成龙创作记录

鲍成龙

一、ajax嵌套

ajax嵌套ajax。跟疯狂for循环一样，这种方式只能串行发起ajax请求。弊端也很明显，随着ajax请求次数增加，嵌套层数也逐渐加深，代码很难维护。而且，效率也不高。

function getData(){
    $.ajax({url: "/something",type:'GET',dataType:'json',success: function(data1){
            $.ajax({url: "/something",type:'GET',dataType:'json',success: function(data2){
                    $.ajax({url: "/something",type:'GET',dataType:'json',success: function(data3){
                            console.log(data1);
                            console.log(data2);
                            console.log(data3);
                        }
                    })
                }
            })
        }
    })
}

二、设置一个全局变量

所有ajax接口都可以同时发起请求，而且代码分离，在每个ajax的callback都统一回调一个函数，由这个函数来判断全局变量是否达到条件。

function getData(){
    var flag = 0,
        _data1,
        _data2,
        _data3;
    $.ajax({url: "/something",type:'GET',dataType:'json',success: function(data1){
            flag++;
            _data1 = data1;
            if(flag == 3){
                //do something
            }
        }
    })
 
    $.ajax({url: "/something",type:'GET',dataType:'json',success: function(data2){
            flag++;
            _data2 = data2;
 
            if(flag == 3){
                //do something
            }
        }
    })
 
    $.ajax({url: "/something",type:'GET',dataType:'json',success: function(data3){
            flag++;
            _data3 = data3;
            if(flag == 3){
                //do something
            }
        }
    })
}

三、使用jquery的$.when()方法，就是promise模式，让异步请求方式变为链式调用，以及能做到并行请求

如果所有请求成功返回，then方法里第一个回调执行，如果任意一个请求失败，则执行第二个回调。

function getData(){
    var fun1 = $.ajax({url: "/something",type:'GET',dataType:'json'}),
        fun2 = $.ajax({url: "/something",type:'GET',dataType:'json'}),
        fun3 = $.ajax({url: "/something",type:'GET',dataType:'json'});
    $.when(fun1,fun2,fun3).then(function(data1,data2,data3){
        //成功回调，所有请求正确返回时调用
        console.log(data1);
        console.log(data2);
        console.log(data3);
    },function(){
        //失败回调，任意一个请求失败时返回
        console.log('error');
    })  
}

3年前