场景:想请求量较大的网络数据,好比想获取1000条结果,但数据处理速度慢,有超时的风险,能够分红10次处理,每次处理100条;全部请求完成后再统一进行处理。git
这样的应用场景,能够这样处理:github
// 模拟网络请求 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不像咱们指望的那样,好比因为网络传输或者处理异常,少一条,那么咱们将没法作后续的处理。这种处理方式强业务耦合;不具备普适性。api
// 方案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(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的处理。避免其对最终处理的影响。dom
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还支持多个不一样事件的侦听和处理。fetch