ajax请求多个url解决办法

南知唔知 523 0

一、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');
    })  
}

发表评论 取消回复
表情 图片 链接 代码

分享