ネットワークリクエスト、ファイル読み取り、タイマーはすべて後で終了しますが、JavaScript は単純に停止して待つことはできません。そうしないとページがフリーズします。 JavaScript の約束 は、「これが完了したらあれを実行し、失敗した場合は代わりにこれを実行する」というきちんとした方法を提供します。

主に async と await を記述している場合でも、その下で Promise を使用しているため、それらを理解するとデバッグがはるかに簡単になります。これらの例は Node.js 24 で実行し、示されている出力はその実行からのものです。最新のブラウザでも同様に動作します。

約束とは何ですか？

Promise は将来の値のプレースホルダーです。レストランで注文時に渡されるブザーを思い浮かべてください。あなたはまだ食べ物を持っていませんが、準備ができたこと、または問題があることを知らせてくれる何かを持っており、その間、あなたは自由に他のことをすることができます。

コードでは、非同期関数はすぐに Promise を返し、次に何が起こるかを添付します。

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

3 つの約束の状態

履行または拒否された約束は、決済と呼ばれます。約束は一度だけ解決できます。その後、その状態と値は固定され、その後の resolve または reject の呼び出しは無視されます。

約束を作成する

通常、fetch のような API から Promise を使用しますが、Promise を作成すると、それがどのように機能するかがわかります。コンストラクターは 2 つの関数 resolve と reject を受け取ります。

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Promise をすぐに記録すると、タイマーが起動していないため、Promise がまだ保留中であることがわかります。この値には、ハンドラーまたは await を介してのみ到達できます。 Error にはデバッグに役立つスタック トレースが含まれるため、文字列ではなく常に Error オブジェクトを使用して拒否します。

それから捕まえて、そして最後に

これら 3 つのメソッドはハンドラーを Promise にアタッチします。

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then は成功時に実行され、catch は失敗時に実行され、finally はどちらの場合でも実行されます。そのため、finally はローディング スピナーを非表示にするなど、クリーンアップに適した場所になります。結果を気にすべきではないため、引数は受け取りません。

約束を連鎖させる

重要な考え方は、then が常に 新しい Promise を返すということです。ハンドラーが返すものはすべて、新しい Promise の値になります。

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

ハンドラーが別の Promise を返した場合、チェーンはそれが完了するまで待ってから次に進みます。これは、ネストされたコールバックを一連のフラットなステップに変換するものです。

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

エラーがチェーンを介して伝わる仕組み

拒否された Promise は、catch に達するまで then ごとにスキップされます。ハンドラー内でのスローも拒否としてカウントされます。そして、catch が返されると、通常はチェーンが軌道に戻ります。

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

これは try と catch の非同期バージョンと考えてください。通常、最後に 1 つの catch がチェーン全体をカバーします。エラーを記録するだけでまだ失敗する場合は、catch 内から再度スローします。

Promise.all、allSettled、race および any

これらの静的メソッドは、複数の Promise を一度に調整します。それらはすべて配列を受け取り、1 つの Promise を返します。

これらをテストするために、2 つの小さなヘルパーを使用しました。1 つは遅延後に成功し、もう 1 つは遅延後に失敗します。

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

注目すべき 2 つの詳細。 b が最初に終了した場合でも、結果は入力順序を維持します。合計時間は約 300 ミリ秒で、3 つすべてがすでに同時に実行されていたため、合計の 600 ミリ秒ではなく、最も遅いタスクの時間でした。そのうちの 1 つが拒否すると、全体が即座に拒否されます。

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

これはすべてを待機し、それぞれの結果を報告するため、1 つの失敗によって残りが失われることはありません。これは、各ウィジェットが個別に読み込まれるダッシュボードに適しています。

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race と Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

違いは、race は失敗しても最初に解決するのに対し、any は何かが成功する限り失敗を無視することです。 race の古典的な使用法は、遅いリクエストにタイムアウトを追加することですが、遅いタスクはキャンセルしない限りバックグラウンドで実行され続けます。

Promise と async/await

async と await は、同じ Promise を扱うためのより読みやすい方法です。 async 関数は常に Promise を返し、await は Promise が解決するまでその関数を一時停止します。

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

拒否はスローエラーになるため、通常の try と catch が機能します。 1 つの呼び出しを待ってから別の呼び出しを順番に実行するため、並列作業には Promise.all が依然として必要です。私たちの JavaScript async/await ガイド では、これについてさらに詳しく説明しています。

Promise とイベント ループ

Promise ハンドラーは、Promise がすでに解決されている場合でも、すぐには呼び出されません。これらは、現在のコードが終了した後、タイマーの前に実行されます。その証拠は次のとおりです。

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

同期コードが最初に実行されます。次に、Promise ハンドラーを保持する microtask キュー が続きます。その後初めて、イベント ループはタイマーなどの次のタスクを選択します。これは面接でよくある質問であり、setTimeout がゼロであることが実際には即時ではない理由を説明しています。

Promise とコールバック

よくある間違い

• then 内に戻るのを忘れています。 return がない場合、次のステップは undefined を受け取り、内なる約束を待ちません。
• いいえcatchまったくありません。これにより未処理の拒否が発生し、Node.js ではデフォルトでプロセスが停止します。
• チェーンの代わりにネストする。 then の中に then を入れると、コールバック地獄が再現されます。約束を返して連鎖を続けます。
• Promise を new Promise でラップします。 関数がすでに Promise を返している場合は、それをそのまま使用します。
• 非同期コールバックで forEach を使用します。 待機しません。 JavaScript 配列メソッド のガイドに示されているように、for...of または Promise.all と map を使用します。
• 約束はキャンセルできると考えます。それ自体はキャンセルできません。リクエストの場合は AbortController を使用してください。

まとめ

Promise はいくつかのルールに帰着します。Promise は一度解決され、then は新しい Promise を返し、エラーは何かがキャッチされるまでチェーンを下っていきます。これらのルールが自然だと感じられれば、async と await は魔法ではなくなります。練習するには、Promise を使用して 1 つのコールバックベースの関数を書き直し、Promise.all で 2 つのエンドポイントをフェッチし、失敗を適切に処理します。

よくある質問

学び続ける