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

时间:2022-05-06
本文章向大家介绍JS中如何处理多个ajax并发请求?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送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 + '已完成');
});