【初心者向け】JavaScriptでPromiseを使いこなす！catchとthenの基礎から応用まで

2024-06-17

JavaScript、Node.js、Promiseにおける catch と then の配置

JavaScript、Node.jsにおける非同期処理において、Promiseは重要な役割を果たします。Promiseには、処理完了時に実行されるthenメソッドと、処理失敗時に実行されるcatchメソッドが用意されています。

本記事では、catchメソッドとthenメソッドの配置について、分かりやすく解説します。

catchメソッドとthenメソッドの配置には、2つのパターンがあります。

thenメソッドの前に配置

promise
  .catch(error => {
    console.error('エラーが発生しました:', error);
  })
  .then(result => {
    console.log('処理が完了しました:', result);
  });

この場合、Promiseが拒否された場合のみ、catchメソッド内の処理が実行されます。Promiseが完了した場合は、catchメソッドはスキップされ、thenメソッド内の処理が実行されます。

promise
  .then(result => {
    console.log('処理が完了しました:', result);
  })
  .catch(error => {
    console.error('エラーが発生しました:', error);
  });

この場合、Promiseが完了した場合もthenメソッド内の処理が実行され、その後、Promiseが拒否された場合のみ、catchメソッド内の処理が実行されます。

どちらの配置が適切か？

エラー処理を独立させたい場合: catchメソッドをthenメソッドの前に配置します。

補足

catchメソッドは、Promiseチェーンのどこでも配置できます。
複数のcatchメソッドを連続して配置することもできます。
Promiseが拒否された場合、その後のthenメソッドはスキップされます。

例

以下のコードは、非同期処理を2回実行し、いずれかの処理が失敗した場合にエラー処理を行う例です。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('処理1が完了しました');
    } else {
      reject(new Error('処理1が失敗しました'));
    }
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('処理2が完了しました');
    } else {
      reject(new Error('処理2が失敗しました'));
    }
  }, 2000);
});

promise1
  .then(result => {
    console.log(result);
    return promise2;
  })
  .catch(error => {
    console.error('処理1が失敗しました:', error);
    return promise2; // 処理2を継続実行
  })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error('処理2が失敗しました:', error);
  });

catchメソッドとthenメソッドの配置は、状況に応じて適切な方法を選択することが重要です。本記事を参考に、Promiseを効果的に活用してください。

catchメソッドをthenメソッドの前に配置

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('成功しました');
    } else {
      reject(new Error('失敗しました'));
    }
  }, 1000);
});

promise
  .catch(error => {
    console.error('エラーが発生しました:', error);
  })
  .then(result => {
    console.log('処理が完了しました:', result);
  });

このコードでは、50%の確率でPromiseが拒否されます。catchメソッドがthenメソッドの前に配置されているため、Promiseが拒否された場合は、catchメソッド内の処理が実行され、thenメソッドはスキップされます。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('成功しました');
    } else {
      reject(new Error('失敗しました'));
    }
  }, 1000);
});

promise
  .then(result => {
    console.log('処理が完了しました:', result);
  })
  .catch(error => {
    console.error('エラーが発生しました:', error);
  });

複数のcatchメソッドを配置

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.3) {
      resolve('成功しました');
    } else if (Math.random() < 0.6) {
      reject(new Error('エラー1が発生しました'));
    } else {
      reject(new Error('エラー2が発生しました'));
    }
  }, 1000);
});

promise
  .catch(error => {
    console.error('エラーが発生しました:', error.message); // エラーメッセージを取得
  })
  .catch(error => {
    if (error.message === 'エラー1が発生しました') {
      console.error('エラー1を補足しました');
    }
  })
  .then(result => {
    console.log('処理が完了しました:', result);
  });

このコードでは、30%の確率でPromiseが成功し、30%の確率でエラー1が発生しました、40%の確率でエラー2が発生しましたとなります。

最初のcatchメソッドは、すべてのエラーを補足します。2番目のcatchメソッドは、error.messageを使用してエラーの種類を判別し、エラー1が発生しましたのみを補足します。

これらのサンプルコードは、catchメソッドとthenメソッドの配置と、複数のcatchメソッドの使用方法を理解するのに役立ちます。状況に応じて適切な方法を選択してください。

その他のcatchとthenの配置方法

非同期エラー処理

非同期処理において、エラーが発生した箇所と別の箇所でエラー処理を行う場合があります。

この場合、以下の様にthenとcatchを組み合わせることができます。

const asyncFunction = async () => {
  try {
    const result = await someAsyncOperation();
    console.log(result);
  } catch (error) {
    console.error('エラーが発生しました:', error);
    // エラー処理を行う
  }
};

asyncFunction();

このコードでは、someAsyncOperationが非同期処理を実行します。someAsyncOperationが成功した場合、then内の処理が実行されます。一方、someAsyncOperationが失敗した場合、catch内の処理が実行されます。

エラーハンドリングとデフォルト値の設定

Promiseが拒否された場合、デフォルト値を設定したい場合があります。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('成功しました');
    } else {
      reject(new Error('失敗しました'));
    }
  }, 1000);
});

promise
  .then(result => {
    console.log('処理が完了しました:', result);
  })
  .catch(error => {
    console.error('エラーが発生しました:', error);
    console.log('デフォルト値:', defaultValue); // デフォルト値を設定
  });

このコードでは、50%の確率でPromiseが拒否されます。catch内の処理では、エラーメッセージを出力した後、defaultValueという変数にデフォルト値を設定します。

複数のPromiseを処理し、それぞれ異なる処理を実行したい場合があります。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('処理1が完了しました');
    } else {
      reject(new Error('処理1が失敗しました'));
    }
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('処理2が完了しました');
    } else {
      reject(new Error('処理2が失敗しました'));
    }
  }, 2000);
});

promise1
  .then(result => {
    console.log(result);
    return promise2;
  })
  .catch(error => {
    console.error('処理1が失敗しました:', error);
    return promise2; // 処理2を継続実行
  })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error('処理2が失敗しました:', error);
  });