Promise は、非同期処理の最終的な完了（または失敗）と、その結果得られる値を表すオブジェクトです。
Promise の状態遷移
Promise は常に以下の3つの排他的な状態のいずれかをとります：
- pending (待機): 初期状態。成功も失敗もしていない処理中の状態。
- fulfilled (履行): 処理が正常に完了した状態 (
resolve(value)). - rejected (拒絶): 処理がエラーで失敗した状態 (
reject(error)).
コンストラクタと基本的なメソッドチェーン
const loadUser = (id) => {
return new Promise((resolve, reject) => {
fetch(`/api/users/${id}`)
.then((res) => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then((data) => resolve(data))
.catch((err) => reject(err));
});
};
loadUser(42)
.then((user) => console.log('取得完了:', user.name))
.catch((err) => console.error('Error:', err.message))
.finally(() => console.log('リクエスト処理完了'));
静的リゾルバメソッド
// 即座に解決される Promise
const p1 = Promise.resolve('Immediate value');
// 即座に拒絶される Promise
const p2 = Promise.reject(new Error('Immediate failure'));
Promise 結合メソッド (Combinators)
| メソッド | 動作仕様 | 失敗条件 |
|---|---|---|
Promise.all([p1, p2]) |
配列内のすべての Promise が成功するのを待機 | いずれか1つでも失敗した場合 (即座にショートサーキット) |
Promise.allSettled([p1, p2]) |
すべての Promise の成否が決まるまで待機 (決して拒絶されない) | 決して拒絶されない |
Promise.race([p1, p2]) |
最初に完了 (成功・失敗問わず) した Promise の結果を採用 | 最初に完了した Promise が失敗した場合 |
Promise.any([p1, p2]) |
最初に成功した Promise の結果で解決 | すべての Promise が失敗した場合 (AggregateError) |
// Promise.all: 独立した複数の非同期処理を並行待機
const [users, posts] = await Promise.all([
fetchUsers(),
fetchPosts()
]);
// Promise.allSettled: すべての非同期結果の成否を安全に検査
const results = await Promise.allSettled([reqA(), reqB()]);
results.forEach((res) => {
if (res.status === 'fulfilled') console.log('Value:', res.value);
else console.error('Reason:', res.reason);
});
Async / Await による等価な記述
async function getUserData(id) {
try {
const res = await fetch(`/api/users/${id}`);
const data = await res.json();
return data;
} catch (err) {
console.error('Failed to retrieve user:', err);
throw err;
}
}