thenとcatchによるエラーハンドリング | Promiseの基本 | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

thenとcatchとは？

Promiseオブジェクトを使った非同期処理では、成功時にthen、失敗時にcatchメソッドを使って処理を分岐させることができます。これにより、非同期処理の成功・失敗に応じた適切な処理を行い、エラーハンドリングを行うことができます。

thenメソッドによる成功時の処理

thenメソッドは、Promiseオブジェクトが成功（resolveが呼ばれた場合）した際に実行されます。非同期処理が完了し、結果が成功であるときにその結果を受け取り、次の処理を実行します。

thenメソッドの使用例

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("データ取得成功");
    }, 2000); // 2秒後に成功
});

promise.then(function(result) {
    console.log(result); // "データ取得成功" が出力される
});

この例では、resolveが呼ばれたことでthenが実行され、結果として「データ取得成功」がコンソールに出力されます。

catchメソッドによる失敗時の処理

一方、catchメソッドは、Promiseが失敗（rejectが呼ばれた場合）したときに実行されます。非同期処理がエラーを返した場合に、そのエラーをキャッチして適切なエラーハンドリングを行います。

catchメソッドの使用例

const promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject("データ取得失敗");
    }, 2000); // 2秒後に失敗
});

promise.then(function(result) {
    console.log(result);
}).catch(function(error) {
    console.error(error); // "データ取得失敗" が出力される
});

この例では、rejectが呼ばれたためcatchが実行され、「データ取得失敗」がコンソールに表示されます。

Promiseのエラーハンドリングのフロー

Promiseを使った非同期処理では、thenとcatchを組み合わせてエラーハンドリングを行います。処理の流れとしては、まずthenで結果を受け取り、失敗時にはcatchでエラーをキャッチします。

Promiseチェーンにおけるエラーハンドリングの例

const promise = new Promise(function(resolve, reject) {
    const success = false;
    setTimeout(function() {
        if (success) {
            resolve("データ取得成功");
        } else {
            reject("データ取得失敗");
        }
    }, 2000);
});

promise
    .then(function(result) {
        console.log(result);
    })
    .catch(function(error) {
        console.error(error); // "データ取得失敗" が出力される
    });

この例では、successがfalseの場合、catchが実行されエラーが表示されます。thenが実行されるのはresolveが呼ばれた場合のみであり、catchはrejectが呼ばれた際に実行されます。

thenとcatchの使い方の比較

以下は、thenとcatchの使い方を整理した表です。

メソッド 役割
then 非同期処理が成功したときに実行され、結果を受け取って次の処理を行う。
catch 非同期処理が失敗したときに実行され、エラーハンドリングを行う。

Promiseチェーンとエラー処理

Promiseチェーンでは、複数の非同期処理を連続して実行する際に、それぞれのthenで成功時の処理を行い、catchで失敗時のエラーハンドリングを行うことができます。

Promiseチェーンにおけるエラー処理の例

function fetchData1() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve("データ1取得成功");
        }, 1000);
    });
}

function fetchData2() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            reject("データ2取得失敗");
        }, 1000);
    });
}

fetchData1()
    .then(fetchData2)
    .then(function(result) {
        console.log(result);
    })
    .catch(function(error) {
        console.error(error); // "データ2取得失敗" が出力される
    });

この例では、fetchData1が成功し、fetchData2が失敗したためcatchが実行されます。Promiseチェーンにおけるエラーハンドリングは、失敗した地点でcatchに処理が飛びます。

まとめ

thenとcatchメソッドを使うことで、Promiseを用いた非同期処理の結果に応じて、成功時と失敗時の処理を適切に分岐させることができます。特に、Promiseチェーンを使った複数の非同期処理においても、エラーハンドリングをシンプルかつ明確に実装できるのが利点です。

スポンサーリンク