Promise
promise
一言で言うと
JavaScript で「あとから返ってくる値」を表すオブジェクト。pending → fulfilled / rejected の 3 状態を持ち、.then() や await で結果を受け取る。
もう少し詳しく
一言で言うと
JavaScript で「あとから返ってくる値」を表すオブジェクト。pending → fulfilled / rejected の 3 状態を持ち、.then() や await で結果を受け取る。
詳細
Promise が解決する課題はネスト地獄 (コールバック地獄) です。古い JavaScript では非同期処理を入れ子のコールバックで書いていたため、エラー処理と読みやすさが破綻しがちでした。Promise はこれを「状態を持つ箱」として扱い、後続処理を .then() のチェーンや await で直列化できます。
状態は 3 つあります。pending (処理中)、fulfilled (成功して値が確定)、rejected (失敗してエラー確定)。一度確定 (settled) すると変わりません。fetch、fs.promises、DB クライアントなど、ほぼすべての I/O API が Promise を返します。
具体例
// 1. 基本: .then() / .catch()
fetch("/api/users/1")
.then((res) => res.json())
.then((user) => console.log(user.name))
.catch((err) => console.error("失敗", err));// 2. async/await 版 (同じ処理)
async function loadUser() {
try {
const res = await fetch("/api/users/1");
const user = await res.json();
console.log(user.name);
} catch (err) {
console.error("失敗", err);
}
}
// 3. 並列で実行
const [users, posts] = await Promise.all([
fetch("/api/users").then((r) => r.json()),
fetch("/api/posts").then((r) => r.json()),
]);
// 4. 一番速いものだけ採用
const fastest = await Promise.race([fetchFromTokyo(), fetchFromOsaka()]);
使い分け / トレードオフ
.then() と async/await は等価ですが、3 つ以上の連続した await や try/catch によるエラー処理を書く場合は async/await のほうが読みやすいです。一方、Promise.all のように複数の Promise を組み合わせるときは .then 系の API がそのまま使えます。
Promise.all は 1 つでも reject すると全部失敗扱いになるので、独立して失敗を許容したいときは Promise.allSettled を使います。逐次実行が必要なら for-of + await に切り替えます (Array.prototype.forEach 内の await は効きません)。
よくある質問
Q. await を忘れたらどうなる？
A. Promise オブジェクトそのものが返るため、中身を使う処理で型エラーや
undefined 参照が発生します。lint で @typescript-eslint/no-floating-promises を有効にすると検出できます。