【Javascript】Promise.all

##Promise.allとは

Promise.all は、引数に指定したすべてのPromiseを実行するメソッドです。
promiseが全てresolveされた時は.thenを実行、1つでもrejectされたときには.catchを実行します。

const promise1 = new Promise((resolve,reject) => {
	setTimeout(() => {
		resolve('promise1成功')
	},1000)
})

const promise2 = new Promise((resolve,reject) => {
	setTimeout(() => {
		resolve("promise2成功")
	},1000)
})

const promise3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('promise3成功')
	},1000)
})

Promise.all([promise1,promise2,promise3])
    .then( (message) => {
        console.log(message) ;	
    } ) 
    .catch( function (error) {
        console.log(error) ;	
    } ) ;

実行結果

[ 'promise1成功', 'promise2成功', 'promise3成功' ]

上記の例では、すべてのPromiseがresolveなので.thenに入り[ 'promise1成功', 'promise2成功', 'promise3成功' ]が表示されました。
次に、Promise2をrejectにしてみます。

const promise1 = new Promise((resolve,reject) => {
	setTimeout(() => {
		resolve('promise1成功')
	},1000)
})

const promise2 = new Promise((resolve,reject) => {
	setTimeout(() => {
		reject("promise2失敗")
	},1000)
})

const promise3 = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('promise3成功')
	},1000)
})

Promise.all([promise1,promise2,promise3])
    .then( (message) => {
        console.log(message) ;	
    } ) 
    .catch( function (error) {
        console.log(error) ;	
    } ) ;

実行結果

promise2失敗

全てのPromiseを実行した結果、promise2がrejectであったため.catch()に入りpromise2失敗が表示されました。

##個別にエラーハンドリングがしたい
1つでもrejectがあれば.catch()に入るため、全体的にはどれがrejectになっているかが分かりづらくはないでしょうか。

const promise1 = new Promise ((resolve,reject) => {
    setTimeout(() => {
        reject('promise1失敗')
    },1000)
})

const promise2 = new Promise ((resolve,reject) =>{
    setTimeout(() => {
        reject('promise2失敗')
    },1000)
})

const promise3 = new Promise ((resolve,reject) =>{
    setTimeout(() => {
        reject('promise3失敗')
    },1000)
})

Promise.all([promise1,promise2,promise3])
    .then(function(messege){
        console.log(messege)
    })
    .catch(function(reason) {
        console.log(reason)
    });

promise1失敗

promise2もpromise3もrejectですが、logにはpromise1失敗のみが表示されます。

個別にエラーを明示的に出したい場合は下記のようにします。

const promise1 = new Promise ((resolve,reject) => {
    setTimeout(() => {
        reject('promise1失敗')
    },1000)
}).catch(() => {
    console.log('promise1エラー');
})

const promise2 = new Promise ((resolve,reject) =>{
    setTimeout(() => {
        reject('promise2失敗')
    },1000)
}).catch(() => {
    console.log('promise2エラー');
})


const promise3 = new Promise ((resolve,reject) =>{
    setTimeout(() => {
        resolve('promise3成功')
    },1000)
}).catch(() => {
    console.log('promise3エラー');
})


Promise.all([promise1,promise2,promise3])
    .then(function(messege){
        console.log(messege)
    })
    .catch(function(reason) {
        console.log(reason)
    });

promise1エラー
promise2エラー
[ undefined, undefined, 'promise3成功' ]

個別にエラーが出てることが確認できます。
promise1、promise2はそのまま.catch()に入りconsole.log()が実行され、resolveやrejectの状態ではなくなったのでundefindとなりました。

##Promise.allに指定したオブジェクトがPromiseオブジェクトじゃなかった場合

const promise1 = new Promise((resolve,reject) => {
	setTimeout(() => {
		resolve('promise1成功')
	},1000)
})

const promise2 = new Promise((resolve,reject) => {
	setTimeout(() => {
		resolve("promise2成功")
	},1000)
})


const promise3 = 'ただの定数'


Promise.all([promise1,promise2,promise3])
    .then(function(messege){
        console.log(messege)
    })
    .catch(function(reason) {
        console.log(reason)
    });

実行結果

[ 'promise1成功', 'promise2成功', 'ただの定数' ]

エラーになるかと思ったのですが、予想とは違った結果が返ってきました。
「reject以外はresolveや」とでも言いたいのでしょうか。