66.ajax--ajax请求多个url解决办法

 

ajax请求多个url解决办法

以下四种方法是我找的，我也进行实践过。

测试中有四个请求接口，原本需要13S，用了第三种方法缩减到7S，但是仍不能达到2S以内。

所以仅供参考，待我找到能缩减到2S以内的办法。如果有读者有解决办法，可以写下来，我感激不尽！

还有一个方法就是把异步变为同步，速度会提升很快

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

四、后端改接口，把请求合并成一个

作者：南知唔知
链接：https://www.jianshu.com/p/96785bbe5b90
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。