マンガでわかるJavaScriptのPromise

第10話「reject」

今回は「reject」を使ったコード、その1です。

コード1

　「then」の第2引数を使って、処理を分岐する例です。

ソースコード）「then」の第2引数で処理を分岐

new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject();
    }, 1000);
})
.then(
    function() {
        console.log('解決');
    },
    function() {
        console.log('拒否');
    }
);

出力）実行結果

拒否

コード2

　「catch」を使って分岐する例です。

ソースコード）「catch」を使って分岐

new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject();
    }, 1000);
})
.then(function() {
    console.log('解決1');
})
.then(function() {
    console.log('解決2');
})
.catch(function() {
    console.log('キャッチ');
});

出力）実行結果

キャッチ

コード3

　「then」による分岐と「catch」による分岐を混ぜた例です。

ソースコード）「then」と「catch」を混ぜる

new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject();
    }, 1000);
})
.then(
    function() { console.log('解決1') },
    function() { console.log('拒否1') }
)
.then(
    function() { console.log('解決2') },
    function() { console.log('拒否2') }
)
.catch(function() {
    console.log('キャッチ')
});

出力）実行結果

拒否1
解決2

コード4

　「reject」で値を送る例です。

ソースコード）「reject」で値を送る

new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject('エラー');
    }, 1000);
})
.then(
    function(arg) {
        console.log('解決', arg);
    },
    function(arg) {
        console.log('拒否', arg);
    }
);

出力）実行結果

拒否 エラー

コラム：3つの状態

　「Promise」には3つの状態があります。初期状態の「待機」(pending)と、処理が成功して完了した「履行」(fulfilled)、処理が失敗した「拒否」(rejected)です。

　待機状態の「Promise」は、値を持った履行状態か、エラーの理由を持った拒否状態に変わります。

　「Promise」が待機以外の状態になった場合は、「決定」(settled)と呼ばれます。

　これらの状態遷移を知らなくてもプログラムは書けますが、覚えておくとよいです。

種類無料版有料版
頒布先 Amazon Booth
形態Kindle電書PDF+コード
価格0円500円
目的知識普及
安価に閲覧		作者応援
自由な環境で閲覧
DRMありなし
マンガ○○
コラム○○
実行可能な
コード		×○
作成：2022/07/23　 更新：2022/07/23　 [Permalink]