SYNCERのロゴ
アイキャッチ画像

Promise.prototype.catch() - Promiseの拒否の結果を受けて実行される

Promise.prototype.catch()は、Promiseの拒否(rejected)の結果を受けて実行される関数を指定するメソッドです。

概要

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

説明

Promise.prototype.catch ( onRejected )

引数(onRejected)には、インスタンスの状態が保留(pending)から拒否(rejected)に変化した時に実行する関数を指定して下さい。

引数の関数の返り値は、履行(fulfilled)の結果の値として次のthen()に渡されます。関数内でエラーが発生した場合は、拒否(rejected)の結果の値として次のthen()、またはcatch()に渡されます。

チュートリアル

catch()はPromiseのチェーン内で次のように働きます。

new Promise( function( resolve, reject ) {
	reject( "hoge" ) ;	// rejected
} )
.then( function ( message ) {
	// not called
	return "fuga" ;
} )
.then( function ( message ) {
	// not called
	return "piyo" ;
} )
.catch( function ( reason ) {
	console.log( reason ) ;	// "hoge"
	return "toto" ;
} )
.then( function ( message ) {
	console.log( reason ) ;	// "toto"
} ) ;

返り値を返すとfulfilledとして、エラーが発生するとrejectedとして次に渡されます。

.catch ( function ( reason ) ) {
	if ( ??? ) {
		return "fulfilled!!" ;
	} else {
		throw "rejected!!" ;
	}
}
.then( function () {
	// fulfilledの場合に実行される
}, function () {
	// rejectedの場合に実行される
} ) ;

デモ

Promise.prototype.catch()のデモです。

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

<!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 promise = new Promise( function( resolve, reject ) {
	setTimeout( function () {
//		resolve( "3秒経過 (成功)" ) ;
		reject( "3秒経過 (失敗)" ) ;
	}, 3000 ) ;
} ) ;

promise
.then( function ( message ) {
	// not called
	return "hoge" ;
} )
.then( function ( message ) {
	// not called
	return "fuga" ;
} )
.then( function ( message ) {
	// not called
	return "piyo" ;
} )
.catch( function ( reason ) {
	console.log( "rejected: ", reason ) ;
	document.getElementById( "result" ).appendChild( new Text( "rejected(2): " + JSON.stringify( reason ) + "\n" ) ) ;
} ) ;
/** try it! **/

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

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
32+ 29+ 7.1+× 19+ 8.3+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月1日 (日)
コンテンツを公開しました。