场景:想请求量较大的网络数据,比如想获取1000条结果,但数据处理速度慢,有超时的风险,可以分成10次处理,每次处理100条;所有请求完成后再统一进行处理。
这样的应用场景,可以这样处理:
方案一:判断请求到的数据条目
// 模拟网络请求
function fetch(url, callback) {
setTimeout(function (){
callback(null, {
subjects: [{
data: Math.round(Math.random() * 100)
}]
});
}, 2000);
}
// 实现方案1
function multiTask_1 () {
var arr = [];
var baseUrl = 'https://api.douban.com/v2/movie/top250';
for (var start = 0; start < 10; start++) {
var url = baseUrl + '?start=' + start + "&count=1";
fetch(url, function(error, res) {
var data = res.subjects;
arr = arr.concat(data);
// 调用完成后统一处理
if (arr.length === 10) {
console.log(arr);
}
});
}
}
将运行结果用arr.length来判断,如果arr.length不像我们期望的那样,比如由于网络传输或者处理异常,少一条,那么我们将无法做后续的处理。这种处理方式强业务耦合;不具有普适性。
方案二:判断异步过程执行次数
// 方案2
function multiTask_2 () {
var taskWatcher = 0;
var arr = [];
var baseUrl = 'https://api.douban.com/v2/movie/top250';
for (var start = 0; start < 10; start++) {
taskWatcher++;
var url = baseUrl + '?start=' + start + "&count=1";
fetch(url, function(error, res) {
var data = res.subjects;
arr = arr.concat(data);
taskWatcher--;
if (taskWatcher === 0) {
console.log(arr);
}
});
}
}
方案2 的判断条件,这里的 taskWatcher 充当异步任务执行情况的观察员,
仅与异步过程的调用次数有关,且与其他处理过程无关。那有没有其他方案呢
方案三:Promise.all()
Promise.all(iterable) 方法返回一个 Promise, 它将在上述可迭代对象中的所有 Promise 被 resolve 之后被 resolve,或者在任一 Promise 被 reject 后被 reject。
function multiTask_3 () {
// var taskWatcher = 0;
var taskStack = [];
var arr = [];
var baseUrl = 'https://api.douban.com/v2/movie/top250';
for (var start = 0; start < 10; start++) {
taskStack.push(
new Promise((resolve, reject) => {
var url = baseUrl + '?start=' + start + "&count=1";
fetch(url, function(error, res) {
var data = res.subjects;
arr = arr.concat(data);
resolve();
});
})
);
}
Promise.all(taskStack).then(function () {
console.log(arr);
});
}
这种方式更具有通用性,如果异步任务类型不同,也可以用这种方式来解决。不过应当注意reject的处理。避免其对最终处理的影响。
方案四: EventProxy
EventProxy是朴灵写的,https://github.com/JacksonTian/eventproxy
var ep = new EventProxy();
var arr = [];
ep.after('fetchData', 10, function (list) {
list.forEach(function(item){
arr = arr.concat(item);
});
console.log(arr);
});
var baseUrl = 'https://api.douban.com/v2/movie/top250';
for (var start = 0; start < 10; start++) {
var url = baseUrl + '?start=' + start + "&count=1";
fetch(url, function(error, res) {
var data = res.subjects;
ep.emit('fetchData', data);
});
}
EventProxy基于事件订阅/发布模式,这里的after 方法可以侦听多次事件,回调中保存了多次异步任务的数据结果的数组;除此之外EventProxy还支持多个不同事件的侦听和处理。