概要

説明

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 ) ;    // "失敗!!"
} ) ;

デモ

<!-- このコードは編集できます。 -->
​
<!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>
저작자표시 비영리 변경금지

'C Lang > JS Technic' 카테고리의 다른 글

CORS란 무엇인가: CORS는 브라우저 하는 일  (0) 2021.07.11
ESlint설치, 실행법, webstrom에서 ESlint적용  (0) 2020.07.10
nodejs, react웹개발의 에러핸들링  (0) 2019.10.28
Airbnb JavaScript 스타일 가이드() {  (0) 2019.10.28
객체와 변경불가성(Immutability)  (0) 2019.10.28

+ Recent posts

티스토리툴바