JavaScript异步并发请求问题

image.png

最近两场面试都被问到类似的问题，其中一家是阿里的一个电话面试，感觉自己答得不是很好，因为之前一直都忽略了这个问题。但仔细想这样的场景确实会经常碰到：页面初始化时显示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，或者设置一个数组，每执行完一个异步函数更新数组。

回调计数

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){}

循环非阻塞

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

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

第三方框架实现

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

使用promise

版本-0.0.1
Promise异步流程控制-0.0.1

function prepareForm(callback){
var promise = new Promise(function(resolve, reject) {
resolve();
});

promise.then(function(){
$.ajax({
url: '/rest/province/all',
type: 'get',
success: function(){
/* render the province select element */
}
});
})
.then(function(){
$.ajax({
url: '/rest/university/all',
type: 'get',
success: function(){
/* render the university select element */
}
});
})
.then(function(){
if(callback){
callback();
}
})
.catch(function(error){
console.log('error: ', error);
});
};

在这里，prepareForm函数依然接受一个回调函数作为参数。如果是ADD操作，则回调中无须再次执行一个Ajax操作；如果是UPDATE操作，则回调函数需要对该条目进行Ajax请求，然后根据这个值去渲染表单——这时不需担心表单里的两个select元素尚未就绪，因为一定是就绪了之后才根据模型对象渲染表单的。
注意：每次调用then都会返回一个新创建的Promise对象。
版本-0.0.1并没有很好地处理rejected情况,后来我意识到Promise应该这样用上面我误以为直接链式then()方法就是Promise处理异步流程的精髓了。然而大错特错。对于异步任务，重要的是保证数据的获取。这通常就需要自定义一个壳，来包装一下Ajax请求的参数、返回数据等，尤其要把返回的数据传给resolve()，以便在then()里可以使用这个数据。下面是例子。

版本-0.0.2

/* 先定义一个返回Promise对象的Ajax过程 */
var getAjaxPromise = function(option){
return new Promise(function(resolve, reject){
$.ajax({
url: option.url,
type: 'get',
data: option.data || '',
success: function(data){
resolve(data);
},
error: function(error){
reject(error);
}
});
});
};

/* 启动第1个异步任务 */
var p1 = getAjaxPromise({
url: 'root/url/1'
});

p1.then(function(data1){
/* 处理第1个异步任务的结果 */
console.log(data1);

/* 然后启动第2个异步任务 */
return getAjaxPromise({
url: 'root/url/2'
});
})
.then(function(data2){
/* 处理第2个异步任务的结果 */
console.log(data2);
});

then() 方法可以链式调用，关键就是每个then都会返回一个新的Promise对象。

参考：http://yalishizhude.github.io/2015/08/18/js-async