JS | Promise.all

Testing

function getURL(URL) {
	 return new Promise(function (resolve, reject) {
		 var req = new XMLHttpRequest();
		 req.open('GET', URL, true);
		 req.onload = function () {
			 if (req.status === 200) {
			 	resolve(req.responseText);
			 } else {
			 	reject(new Error(req.statusText));
			 }
		 };
		 req.onerror = function () {
		 	reject(new Error(req.statusText));
		 };
		 req.send();
	 });
}
var request = {
	 comment: function getComment() {
	 	return getURL('http://azu.github.io/promises-book/json/comment.json').then(JSON.parse);
	 },
	 people: function getPeople() {
	 	return getURL('http://azu.github.io/promises-book/json/people.json').then(JSON.parse);
	 }
 };
function main() {
 	function recordValue(results, value) {
		 results.push(value);
		 return results;
	 }
	 // [] 用来保存初始化的值
	 var pushValue = recordValue.bind(null, []);
	 return request.comment().then(pushValue).then(request.people).then(pushValue);
}
// 运行示例
main().then(function (value) {
	 	console.log(value);
}).catch(function(error){
	 	console.log(error);
});

Promise.all

function getURL(URL) {
	 return new Promise(function (resolve, reject) {
		 var req = new XMLHttpRequest();
		 req.open('GET', URL, true);
		 req.onload = function () {
			 if (req.status === 200) {
			 	resolve(req.responseText);
			 } else {
			 	reject(new Error(req.statusText));
			 }
		 };
		 req.onerror = function () {
		 	reject(new Error(req.statusText));
		 };
		 req.send();
	 });
}
var request = {
	 comment: function getComment() {
	 	return getURL('http://azu.github.io/promises-book/json/comment.json').then(JSON.parse);
	 },
	 people: function getPeople() {
	 	return getURL('http://azu.github.io/promises-book/json/people.json').then(JSON.parse);
	 }
 };
function main() {
 	return Promise.all([request.comment(), request.people()]);
}
// 运行示例
main().then(function (value) {
	 	console.log(value);
}).catch(function(error){
	 	console.log(error);
});

Execution order

Test

// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
	 return new Promise(function (resolve) {
		 setTimeout(function () {
		 	resolve(delay);
		 }, delay);
	 });
}
var startDate = Date.now();
// 所有promise变为resolve后程序退出
Promise.all([
	 timerPromisefy(1),
	 timerPromisefy(32),
	 timerPromisefy(64),
	 timerPromisefy(128)
 ]).then(function (values) {
 	 console.log(Date.now() - startDate + 'ms');
	 // 約128ms
	 console.log(values); // [1,32,64,128]
});

timerPromisefy 会每隔一定时间（通过参数指定）之后，返回一个promise对象，状态为FulFilled，其状态值为传给 timerPromisefy 的参数。而传给 Promise.all 的则是由上述promise组成的数组。

var promises = [
	 timerPromisefy(1),
	 timerPromisefy(32),
	 timerPromisefy(64),
	 timerPromisefy(128)
];

这时候，每隔1, 32, 64, 128 ms都会有一个promise发生 resolve 行为。也就是说，这个promise对象数组中所有promise都变为resolve状态的话，至少需要128ms。

实际我们计算一下 Promise.all 的执行时间的话，它确实是消耗了128ms的时间。

从上述结果可以看出，传递给 Promise.all 的promise并不是一个个的顺序执行的，而是同时开始、并行执行的。
如果这些promise全部串行处理的话，那么需要 等待1ms → 等待32ms→ 等待64ms → 等待128ms ，全部执行完毕需要225ms的时间。