非同期 JavaScript をマスターする: Promise、Async/Await、並列処理をわかりやすく解説 | Aliaksandr Levanenia 著 | 2025 年 1 月

Promise.all() 複数の非同期操作を同時に実行できるシナリオに最適です。 Promise の配列を受け入れ、すべての入力 Promise が解決されたときに解決される単一の Promise を返します。

const fetchUser = () => fetch("/api/user");
const fetchPosts = () => fetch("/api/posts");
const fetchComments = () => fetch("/api/comments");
const loadData = async () => {
try {
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments(),
]);
console.log({ user, posts, comments });
} catch (error) {
console.error(error);
}
};
loadData();

ひとつ約束があれば Promise.all() 失敗すると、すべての Promise が拒否されます。各 Promise を個別に解決または拒否したい場合は、次を使用します。 Promise.allSettled()、結果の配列を返します。 status そして value または reason それぞれの約束ごとに。

const results = await Promise.allSettled([
fetchUser(),
fetchPosts(),
fetchComments(),
]);
results.forEach(result => {
if (result.status === "fulfilled") {
console.log("Success:", result.value);
} else {
console.log("Error:", result.reason);
}
});

このメソッドは、一部のリクエストが失敗することが予想されるが、それでも成功したリクエストを処理したい API に役立ちます。

Promise.race() 解決するか拒否するかに関係なく、解決する最初の Promise の結果を返します。これは、タイムアウト メカニズムが必要なシナリオに役立ちます。

const fetchWithTimeout = (url, ms) => {
const timeout = new Promise((_, reject) => 
setTimeout(() => reject("Request timed out"), ms)
);
return Promise.race([fetch(url), timeout]);
};
fetchWithTimeout("/api/data", 2000)
.then((response) => console.log("Data:", response))
.catch((error) => console.error(error));