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

佚名 6年前 (2019-04-10) 随笔 560人围观抢沙发百度已收录

ajax请求多个url解决办法

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

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

所以仅供参考，待我找到能缩减到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'); }) }