JavaScriptのthenを使いこなす5つの方法

はじめに
●JavaScriptのthenとは
- ○thenメソッドの基本
●thenメソッドの使い方
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptのthenメソッドを使いこなすことができるようになります。

初心者でも分かりやすいように、基本的な使い方から応用例まで詳しく解説しているので、ぜひ参考にしてください。

●JavaScriptのthenとは

○thenメソッドの基本

JavaScriptのthenメソッドは、Promiseオブジェクトに使用される非同期処理を扱うためのメソッドです。

thenメソッドを使うことで、非同期処理が終了した後に実行したい処理を定義することができます。

●thenメソッドの使い方

○サンプルコード1：非同期処理の結果を表示する

このコードでは、fetch関数を使って非同期処理を行い、その結果をコンソールに表示するコードを紹介しています。

この例では、fetch関数でデータを取得し、thenメソッドでその結果を処理しています。

fetch('https://api.example.com/data')
  .then(response => response.json()) // 取得したデータをJSON形式に変換
  .then(data => console.log(data)) // 変換されたデータをコンソールに表示
  .catch(error => console.error('エラーが発生しました:', error)); // エラー処理

○サンプルコード2：複数の非同期処理を順番に実行する

このコードでは、複数の非同期処理を順番に実行する方法を紹介しています。

この例では、2つの非同期処理があり、1つ目の非同期処理が終わった後に、2つ目の非同期処理を実行しています。

function asyncFunction1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('非同期処理1が完了');
      resolve();
    }, 1000);
  });
}

function asyncFunction2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('非同期処理2が完了');
      resolve();
    }, 1000);
  });
}

asyncFunction1()
  .then(() => asyncFunction2()) // 非同期処理1が終わったら、非同期処理2を実行
  .catch(error => console.error('エラーが発生しました:', error)); // エラー処理

○サンプルコード3：thenメソッドをチェインして処理をつなげる

このコードでは、thenメソッドをチェインして複数の処理をつなげる方法を紹介しています。

この例では、非同期処理が完了した後に、次の処理を連続して実行しています。

function asyncFunction() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('非同期処理が完了');
      resolve('結果データ');
    }, 1000);
  });
}

asyncFunction()
  .then(result => {
    console.log('処理1:', result);
    return '処理1の結果';
  })
  .then(result => {
    console.log('処理2:', result);
  })
  .catch(error => console.error('エラーが発生しました:', error)); // エラー処理

○サンプルコード4：エラーハンドリングを行う

このコードでは、thenメソッドを使用して非同期処理のエラーハンドリングを行う方法を紹介しています。

この例では、非同期処理が失敗した場合に、catchメソッドでエラーを処理しています。

function asyncFunctionWithError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('非同期処理が失敗');
      reject(new Error('エラーメッセージ'));
    }, 1000);
  });
}

asyncFunctionWithError()
  .then(result => console.log('結果:', result))
  .catch(error => console.error('エラーが発生しました:', error.message)); // エラー処理

○サンプルコード5：Async/Awaitを使った書き方

このコードでは、Async/Awaitを使ってthenメソッドを用いずに非同期処理を実行する方法を紹介しています。

この例では、非同期処理が完了するまで待機し、結果をコンソールに表示しています。

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

getData();

●注意点と対処法

thenメソッドはPromiseオブジェクトが返される関数に対して使えます。
通常の関数に対してthenメソッドを使おうとするとエラーが発生しますので、注意してください。
thenメソッドの中で、return文を忘れると、次のthenメソッドでundefinedが渡されることになります。
値を引き継ぐ際は、return文を使って値を返すことが重要です。
エラーハンドリングを適切に行わないと、非同期処理中にエラーが発生してもそのエラーが検出されずに処理が継続されることがあります。
catchメソッドやAsync/Awaitのtry-catch構文を使ってエラー処理を行いましょう。