Promise.all() - 複数のPromise関数を実行し、全ての結果を得る

2017/09/30

Promise.all()は、引数に指定した全てのPromiseを実行するメソッドです。全てのPromiseが履行(fulfilled)になるか、または1つでも拒否(rejected)になった時点で処理が終了します。

概要

名前: all
所属: Promise
仕様書: https://tc39.github.io/ecma262/#sec-promise.all

説明

Promise.all ( iterable )

引数(iterable)には、実行したいPrimiseのインスタンスを任意の数だけ配列で指定する。この引数の配列に例えば文字列や数値など、インスタンス以外の値が含まれる場合、その値は、その値をfulfilledの結果として返すインスタンスに変換されます。

全ての結果が履行(fulfilled)だった場合は、fulfilledの値を集めた配列を返す。1つでも拒否(rejected)があった場合は、最初に発生したrejectedの値を返す。

チュートリアル

Promiseのインスタンスを3つ用意します。

// Promise関数 (1)
var promise1 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "3秒経過" ) ;
	}, 3000 ) ;
} ) ;

// Promise関数 (2)
var promise2 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "1秒経過" ) ;
	}, 1000 ) ;
} ) ;

// Promise関数 (3)
var promise3 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "2秒経過" ) ;
	}, 2000 ) ;
} ) ;

用意した3つのインスタンスをall()で実行します。全てのインスタンスの状態が履行(fulfilled)になった時点で処理が完了し、then()の第1引数が実行されます。

Promise.all( [ promise1, promise2, promise3 ] ).then( function ( message ) {
	console.log( message ) ;	// [ "3秒経過", "1秒経過", "2秒経過", ]
} ) ;

または、いずれかのインスタンスの状態が拒否(rejected)になった場合は、そこで処理が完了し、その値が返ります。

// Promise関数 (3)
var promise3 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		reject( "失敗!!" ) ;
	}, 2000 ) ;
} ) ;

Promise.all( [ promise1, promise2, promise3 ] )
.then( function ( message ) {
	console.log( message ) ;	// rejectedがある場合は実行されない
} )
.catch( function ( reason ) {
	console.log( reason ) ;	// "失敗!!"
} ) ;

デモ

Promise.all()のデモです。コメントアウト部分を調整して、拒否(rejected)が発生するパターンも試してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
pre {
	white-space: pre-wrap ;
}
	</style>
</head>
<button id="run">実行</button>
<hr>
<pre id="result"></pre>
<body>
<script>
document.getElementById( "run" ).onclick = function () {
document.getElementById( "result" ).textContent = "" ;

/** try it! **/
var promise1 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "3秒経過" ) ;
//	reject( "promise1で失敗!!" ) ;
	}, 3000 ) ;
} ) ;

var promise2 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "1秒経過" ) ;
//	reject( "promise2で失敗!!" ) ;
	}, 1000 ) ;
} ) ;

var promise3 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "2秒経過" ) ;
//	reject( "promise3で失敗!!" ) ;
	}, 2000 ) ;
} ) ;

Promise.all( [ promise1, promise2, promise3 ] )
.then( function ( message ) {
	console.log( message ) ;
	document.getElementById( "result" ).appendChild( new Text( JSON.stringify( message ) + "\n" ) ) ;
} )
.catch( function ( reason ) {
	console.log( reason ) ;
	document.getElementById( "result" ).appendChild( new Text( JSON.stringify( reason ) + "\n" ) ) ;
} ) ;
/** try it! **/

}
</script>
</body>
</html>