js处理多次ajax请求

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/QTFYING/article/details/79667505

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

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

1）并行改串行

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

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

2）ajax改成同步

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

3）回调计数

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

4）jquery的$.deferred方法

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 + '已完成');
});

5）ES6的Promise方法

function a() {
    return new Promise(function (res, rej) {
        $.ajax({
            url: "a",
            type: "GET",
            async: true,
            dataType: "json",
            success: function (data) {
                console.log(data, "a");
                res(data);
            }
        })
    });
}
function b(data) {
    console.log(data, "data");
    return new Promise(function (res, rej) {
        $.ajax({
            url: "b",
            type: "POST",
            async: true,
            data: JSON.stringify(data),
            dataType: "json",
            success: function (data) {
                console.log(data, "b");
                res();
            }
        })
    });
}
$("#btn").click(function () {
    a().then(function (data) {
        b(data);
    }).then(function () {
    })
})