javascript promise 戻り値

JavaScript Promise 戻り値：非同期処理の成功と失敗を扱う

「JavaScript Promise 戻り値」は、非同期処理の結果を扱うための重要な仕組みです。Promiseオブジェクトは、非同期処理の成功（または失敗）と、その結果の値を表します。thenメソッド、catchメソッド、そしてfinallyメソッドを効果的に使用することで、非同期処理をスムーズに制御し、可読性の高いコードを実現できます。

Promiseの基礎：状態と戻り値

Promiseは、以下の3つの状態を持ちます。

  • pending (待機): 初期状態であり、非同期処理がまだ完了していない状態。
  • fulfilled (履行): 非同期処理が成功し、resolve()関数に渡された値が戻り値となる状態。
  • rejected (拒否): 非同期処理が失敗し、reject()関数に渡された理由が戻り値となる状態。

Promiseがfulfilledまたはrejectedの状態になると、それぞれ対応するthenやcatchメソッドのコールバック関数が実行されます。

thenメソッド：成功時の処理と戻り値

thenメソッドは、Promiseがfulfilledになった場合に実行されるコールバック関数を登録します。このコールバック関数は、resolve()に渡された値を引数として受け取ります。また、thenメソッド自体も新しいPromiseを返すため、メソッドチェーンでつなげることができます。

javascript
const myPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('成功！');
  }, 1000);
});

myPromise.then((value) => {
  console.log(value);  // "成功！"
  return '次の処理へ';
}).then((value) => {
    console.log(value); // "次の処理へ"
});

この例では、最初のthenで受け取った戻り値（'成功！'）が次のthenに渡され、次の処理が実行されます。

thenメソッドの戻り値の活用

thenメソッドのコールバック関数の戻り値は、次のthenメソッドに渡されます。これにより、非同期処理が連続して行われ、結果を次々と渡すことができます。もし戻り値がPromiseであれば、そのPromiseが解決されるまで次のthenの処理は待機します。

catchメソッド：失敗時の処理

catchメソッドは、Promiseがrejectedになった場合に実行されるコールバック関数を登録します。このコールバック関数は、reject()に渡された理由（エラーメッセージなど）を引数として受け取ります。

javascript
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('失敗！');
  }, 1000);
});

myPromise.catch((reason) => {
  console.error('エラー:', reason);  // "エラー: 失敗！"
});​

catchメソッドは、非同期処理の失敗時にエラーハンドリングを行い、エラー内容を表示するために使用されます。

finallyメソッド：成功・失敗に関わらず実行される処理

finallyメソッドは、Promiseがfulfilledまたはrejectedになった場合に必ず実行されるコールバック関数を登録します。finallyの中では引数は渡されず、成功か失敗かに関係なく必ず実行される処理を記述します。

javascript
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('完了！');
  }, 1000);
});

myPromise.finally(() => {
  console.log('処理が完了しました。'); // 常に実行される
});​

finallyは、例えば「ローディング中の表示を消す」「リソースを解放する」といった、処理結果に関係なく必ず行いたい後処理を実行するのに適しています。

Promise.all：複数のPromiseの戻り値をまとめて取得

Promise.allメソッドは、複数のPromiseを並列に実行し、すべてのPromiseがfulfilledになった場合に、それぞれの戻り値を配列として取得できます。いずれかのPromiseがrejectedになると、全体が失敗となり、その理由が返されます。

javascript
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

Promise.allを使うことで、複数の非同期処理を並列で実行し、それらの結果を一度に処理できます。

Promise.race：最も早く完了したPromiseの戻り値を取得

Promise.raceは、複数のPromiseを並列に実行し、最初にfulfilledまたはrejectedになったPromiseの戻り値を取得します。いずれかのPromiseが最初に完了した時点で処理が進みます。

javascript
const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, '最初'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, '遅い'));

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // "遅い"（100msで完了した）
});​

Promise.raceは、早い者勝ちのシナリオで便利です。

async/await：Promiseを同期的に扱う

async/await構文を使うと、Promiseを同期的に扱うことができます。async関数内でawaitを使うことで、Promiseの完了を待って、その戻り値を取得することができます。

javascript
async function asyncFunction() {
  const result = await new Promise((resolve) => setTimeout(() => resolve('完了！'), 1000));
  console.log(result); // "完了！"
}

asyncFunction();​

awaitはPromiseが解決されるまで待機し、結果を返します。これにより、非同期処理を直感的に書けるため、コードが簡潔で読みやすくなります。

まとめ

Promiseとthen、catch、finallyメソッド、Promise.all、Promise.race、そしてasync/awaitを理解することで、JavaScriptの非同期処理を効果的に制御し、可読性と保守性の高いコードを実現できます。「JavaScript Promise 戻り値」をマスターすることで、より効率的で直感的な非同期処理が行えるようになります。

関連情報

さらに詳しい情報については、以下のリソースを参考にしてください：

よくある質問 (QA)

Q1: Promiseの戻り値はどのようにして確認できますか？

A1: then()メソッドを使用して、成功した場合の戻り値を確認できます。

Q2: Promiseが拒否された場合、どうなりますか？

A2: catch()メソッドを使用して、拒否された場合のエラーメッセージを処理します。

Q3: Promiseをどのようにチェーンすることができますか？

A3: then()メソッドを連続して呼び出すことで、複数の非同期処理をチェーンすることができます。

その他の参考記事:promise 使い方