【Node, JavaScript】Promise.all()で複数のPromiseを実行する方法
みなさんPromise.all()の知識はありますか?
この記事はPromise.all()について聞いたことはあるけど、いまいちPromise.all()についてよく分かってない方や、
Promiseについての全く知識がない方や非同期通信の知識がない方へPromiseからPromise.all()の紹介です。
この記事でわかること
- Node, JavaScript】Promise.all()で複数のPromiseを実行する方法の全体の流れ
- 非同期処理とは
- Promiseとは
- Promise.all()とは
- Promise.all()の実装
- Promise.all()の実務的な実装
この記事を最後まで読めば「JavaScriptやNodeの非同期通信」から「PromiseやPromise.all()」までの理解が深まりますので、最後まで読んでマスターしましょう。
それでは順に見ていきましょう。
【Node, JavaScript】Promise.all()で複数のPromiseを実行する方法の全体の流れ
【Node, JavaScript】Promise.all()で複数のPromiseを行うには、次の流れになります。
- 複数の非同期処理を用意する
- Promise.all()で非同期通信を行う
非同期処理とは
非同期通信とは
非同期処理とは、処理を実行中に処理を止めることなく、別の処理を実行できる通信方法を非同期処理と言います。
https://god48.com/node-async-await-promise
非同期通信方法
- Promiseでの非同期処理
- async/awaitでのPromise非同期処理
NodeとJavaScriptの非同期通信は主に二つです。
Promiseとasync/awaitの紹介をしていきます。
スポンサードサーチ
Promiseとは
Promiseとは
Promiseとは、非同期処理の一つで現在ではその中でも新しい記述になります。
https://god48.com/node-async-await-promise
以前まではコールバック地獄など言われる記述などもありましたがその非同期処理をコードが見やすく、成功、失敗、取得が分かりやすい非同期通信の記述になります。
Promise専用の記事も書きますので少しお待ちください。
Promise.all()とは
Promise.all()とは
Promise.all()とは複数のPromise関数を実行して、そのPromise関数の全ての結果を取得することができます。
Promise.all()は、引数にPromise関数をを指定して、実行することができます。
Promiseの結果がfulfilled、rejectedになれば処理が終了します。
Promiseの結果
- fulfilled:Promiseの実行結果が成功したとき
- rejected:Promiseの実行結果が失敗したとき
Promise.all([
asyncMethodOne(),
asyncMethodTwo();
])
.then((result) => {
// 全ての非同期処理が成功した場合
})
.catch((result) => {
// Promise.all内の非同期処理が失敗した場合
});
// 1つ目の非同期処理関数
async asyncMethodOne() {
// 非同期処理
}
// 2つ目の非同期処理関数
async asyncMethodTwo() {
// 非同期処理
}
スポンサードサーチ
Promise.all()の実装
Promise.all()の実装
Promise.all([
asyncMethodOne(),
asyncMethodTwo();
])
.then((result) => {
// 全ての非同期処理が成功した場合
})
.catch((result) => {
// Promise.all内の非同期処理が失敗した場合
});
// 1つ目の非同期処理関数
async asyncMethodOne() {
// 非同期処理
}
// 2つ目の非同期処理関数
async asyncMethodTwo() {
// 非同期処理
}
Promise.all()でasync/await関数の実行例です。
Promise.all()の実務的な実装
const promiseOne = ($node_num1) => {
return new Promise((resolve, reject) => {
if ($node_num1 == 1) {
resolve('promiseOne成功');
} else {
reject('promiseOne失敗');
}
});
};
const promiseTwo = (node_num2) => {
return new Promise((resolve, reject) => {
if ($node_num1 == 2) {
resolve('promiseTwo成功');
} else {
reject('promiseTwo失敗');
}
});
};
const promiseThree = (node_num3) => {
return new Promise((resolve, reject) => {
if ($node_num1 == 3) {
resolve('promiseThree成功');
} else {
reject('promiseThree失敗');
}
});
};
const promiseAllFucn = async () => {
try {
await Promise.all([promiseOne(1), promiseTwo(2), promiseThree(3)]);
alert('promiseOne promiseTwo promiseThree全て成功しました。');
} catch (error) {
alert(error);
}
};
promiseAllFucn();
Promise.all()は複数のPromiseを実行するので、複数の処理を行いたくないときには必要ありません。
全てのPromiseがresolveに入ればPromise.all()の結果が成功します。
一つでもPromiseがrejectに入るとcatchに入りエラーがよばれます。
スポンサードサーチ
Promise.all()の注意
上記にも記載しましたが、全てのPromiseがresolveに入る必要があります。
例えば、非同期処理のライブラリなどを使用して.thenに結果が返ってきたとします。
その結果をPromise.all()したい場合は、そのライブラリの処理を別でnew Promiseしてください。
そしてresolveに結果をreturnしなければいけません。
import { library } from 'hoge/hoge';
const promiseOne = () => {
new Promise((resolve, reject) => {
// libraryの非同期関数を使ったときの例です
library.then((then) => {
resolve('promiseOne library success');
}).cathc((error)= {
resolve(`promiseOne library error:${error}`);
});
});
};
const promiseTWo = () => {
return new Promise((resolve) => {
resolve('promiseTWo success')
});
};
まとめ
- 非同期処理とは:非同期処理とは、処理を実行中に処理を止めることなく、別の処理を実行できる通信方法を非同期処理と言います。
- Promiseとは:非同期処理の一つで、JavaScriptで見やすく非同期処理をかける記述になっています。
- Promise.all()とは:複数のPromise関数を実行して、そのPromise関数の全ての結果を取得することができます。一つでもrejectされると処理は失敗です。
実装やエラーが解決できない場合
プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。
考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。
そういう時は聞ける先輩や、メンターに相談することが大事です。
僕にも相談可能なので気軽に相談してください。
Twitterからの連絡だと確実ですよ。
オンラインスクールやプログラミングスクールといったプログラミングを学べる方法もあるので、そちらもぜひ活用してもいいと思います。
Web開発で分からない時
オンライン完結型スクール DMM WEBCAMP PROアプリ開発で分からない時
プログラミング×稼げる副業スキルはテックキャンププログラミングについて分からない時
【コエテコ様限定】※ご案内を受けた以外のメディアが使用しても成果は承認されません。僕への個人でもメンターでも、スクールでもお好きな方を活用ください。