Promiseの状態遷移と主要メソッドの使い方

JavaScriptにおけるPromiseは、非同期処理の結果を扱うためのオブジェクトであり、特定の状態を持ち、それに応じたメソッドで制御されます。

状態の種類

  • pending(保留中):初期状態。解決も拒否もされていない。
  • fulfilled(成功):非同期処理が正常終了し、値が確定した状態。
  • rejected(失敗):エラーが発生し、拒否された状態。

状態は一度fulfilledまたはrejectedになると変更できません。この性質を「不変性」と呼びます。

主要なインスタンスメソッド

.then(onSuccess, onFailure)

成功時と失敗時のコールバックを登録します。戻り値は新しいPromiseなので、チェーン可能です。

fetchData()
  .then(data => process(data))
  .then(result => display(result))
  .catch(err => handleError(err));

.catch(onFailure)

エラー専用のハンドラ。内部では.then(null, onFailure)と同じです。

loadResource()
  .then(render)
  .catch(showErrorBanner);

.finally(cleanup)

成否に関わらず実行されるクリーンアップ処理を定義します。

uploadFile()
  .then(() => showMessage('完了'))
  .catch(() => showMessage('失敗'))
  .finally(() => hideLoadingSpinner());

静的ユーティリティメソッド

Promise.resolve(value)

即座に解決するPromiseを生成。既存のPromiseを渡すとそのまま返します。

const ready = Promise.resolve(initialData);
ready.then(processImmediately);

Promise.reject(reason)

即座に拒否されるPromiseを生成。

const failed = Promise.reject(new Error('API timeout'));
failed.catch(logError);

Promise.all(promises)

すべてのPromiseが解決するまで待機。一つでも拒否されると即座に拒否されます。

const tasks = [
  fetch('/user'),
  fetch('/profile'),
  fetch('/settings')
];

Promise.all(tasks)
  .then(([user, profile, settings]) => {
    initializeApp(user, profile, settings);
  });

Promise.race(promises)

最も早くsettled(解決または拒否)したPromiseの結果を採用します。

const fastResponse = Promise.race([
  fetchDataFromPrimary(),
  fetchDataFromBackup().then(data => ({ ...data, fromBackup: true }))
]);

fastResponse.then(useData);

タグ: javascript Promise 非同期処理

7月7日 23:31 投稿