4 回閲覧されました

みなさんこんにちは、jonioです。

今回はasync-awaitを使っている時のPromie.allの挙動についてのメモの記事になります。

vue.js3の中で使っています。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

Promise.allとは

下記のコードで考えます。

watch([y, m], async () => {
  await Promise.all([
    メソッドA,
    メソッドB,
    メソッドC,
  ]);
}, { immediate: false });

watch([y, m], async () => {
  await Promise.all([
    メソッドA,
    メソッドB,
    メソッドC,
  ]);
}, { immediate: false });

Promise.allは引数に配列を使い配列の要素にメソッド(サンプルコードはメソッドA・メソッドB・メソッドC)を記述します。

そしてメソッドA・メソッドB・メソッドCを同時に動作させます。

同時に動作させるので動作が1回で済みサーバーの負荷を抑えることができます。

Promise.allを使わないなら下記の様に書くこともできます。

watch([y, m], async () => {
  await メソッドA
  await メソッドB
  await メソッドC

}, { immediate: false });

watch([y, m], async () => {
  await メソッドA
  await メソッドB
  await メソッドC

}, { immediate: false });

この場合は「メソッドA→メソッドB→メソッドC」の順に動作させるので3回動作するのでサーバーに負荷がかかります。

動作させるメソッドが少ない場合は読み込みに時間差は出ないですがメソッドが多くなると読み込みの時間差が発生します。