JS中如何处理多个ajax并发请求?

您所在的位置:网站首页 怎么设置ajax同步和异步 JS中如何处理多个ajax并发请求?

JS中如何处理多个ajax并发请求?

2023-05-16 19:29| 来源: 网络整理| 查看: 265

js中的多并发处理。

通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据

这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?

(1)并行改串行

如果业务逻辑和用户体验允许的情况下,可以改为串行,处理起来最简单

function async1(){//do sth...async2();}function async2(){//do sth...}async1();

(2)回调计数

function async1(){//do sth...callback();}function async2(){//do sth...callback();}function callback(){cnt++;if(2==cnt) console.log('都已执行完毕');}

(3)循环非阻塞

function async1(){//do sth...cnt++;}function async2(){//do sth...cnt++;}var interval = setInterval(function(){if(2===cnt){console.log('已执行完成');clearInterval(interval)}};

这个方法采用了定时间隔触发器,占用CPU比较多,建议酌情使用

(4)jquery

使用jquery的延时处理方法,每个ajax请求完成后,把对应的Deferred置为完成状态,然后用jquery判断全部完成后再进行后续处理

var d1 = $.Deferred();var d2 = $.Deferred();

function async1(){d1.resolve( "Fish" );}

function async2(){d2.resolve( "Pizza" );}

$.when( d1, d2 ).done(function ( v1, v2 ) {console.log( v1 + v2 + '已完成');});

 

另:ajax时异步请求不会出现堵塞情况。

$.when($.ajax, $ajax).done(function() { balabala })

 

转载:

经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading。 举个例子,一个下订单的页面,要查询常用地址信息、商品信息、地市信息…而这些请求都是异步的,希望等到所有数据加载完成后再允许用户操作。 要实现这个场景容易碰到的一个问题就是多并发怎么控制?下面是一些解决方法和思路: 

并行改为串行 如果业务逻辑本身是串行的,但是提供的请求方式又是异步的,可以考虑此方法。 但本场景显然不是这种情况,这样做大大降低了页面性能,延长了加载速度。 

回调 只适合并发数少的情况,多层嵌套回调会让代码的可读性大大降低 

代码  function async1(){       //do sth...   }   function async2(){       //do sth...       async1();   }   async2();  

ajax改为同步 

如在jquery中将async参数设置为false。 

代码  $.ajax({       url:"/jquery/test1.txt",       async:false   });  

设置结束标识 简单一点的可以设置计数器,每完成一个异步函数加1,或者设置一个数组,每执行完一个异步函数更新数组。 

回调计数 

Js代码  var cnt = 0;   function async1(){       //do sth...       callback();   }   function async2(){       //do sth...       callback();   }   function callback(){       cnt++;       if(2==cnt) console.log('都已执行完毕');   }  

循环阻塞 

代码  var cnt = 0;   function async1(){       //do sth...       cnt++;   }   function async2(){       //do sth...       cnt++;   }   while(2>cnt){}  

循环非阻塞 

不建议过多使用,以免影响性能 

Js代码  var cnt = 0;      function async1(){       //do sth...       cnt++;   }   function async2(){       //do sth...       cnt++;   }   var interval = setInterval(function(){       if(2===cnt){           console.log('已执行完成');           clearInterval(interval)       }   }, 0);  

第三方框架实现 jquery 

目前我在项目中采用的方式 

代码  var d1 = $.Deferred();   var d2 = $.Deferred();      function async1(){       d1.resolve( "Fish" );   }      function async2(){       d2.resolve( "Pizza" );   }      $.when( d1, d2 ).done(function ( v1, v2 ) {       console.log( v1 + v2 + '已完成');   });  


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3