Promise.allでデータを一括取得について

Question

#概要
Reactにて、4つのAPIを取得後、内容を描画するというコードを書いています。

#サンプルコード

Promise.all([
  API.get('https://hogehoge1').then(res => (res.data)).catch(() => ({})),
  API.get('https://hogehoge2').then(res => (res.data)).catch(() => ({})),
  API.get('https://hogehoge3').then(res => (res.data)).catch(() => ({})),
  API.get('https://hogehoge4').then(res => (res.data)).catch(() => ({})),
])
.then(res => console.log(res))
.catch((e) => console.log(e));

#質問

1. Promise.all内ではawaitを書くべきですか？

一応なくても想定通り動いています。バックエンドで書いた際は、awaitを書いた方が早かったのです。
2. .then(res)の戻り値の配列の順番は、Promise.all([...])の順番通りですか？
テスト実行した所、Promise.all([...])の順番通り、戻り値が入っていましたが、順番が変わってしまう可能性はありますか

Answer 1

Promise.all内ではawaitを書くべきですか？

いいえ。awaitを書くと直列的に処理されるよう動作が変わってしまいます。

then(res)の戻り値の配列の順番は、Promise.all([...])の順番通りですか？

はい。MDNに以下のような記述があります。

Promise.all() - JavaScript | MDN
返値は、実行完了の順とは関係なく、 Promise が渡された順に並びます。

Comments

[yuki_90453]

ありがとうございました、シンプルでとてもわかり易かったです。

Answer 2

Promise.all内ではawaitを書くべき

非同期で一番遅いタスクをまって返す処理なのでawaitは論理的におかしいです。
thenには出現順に格納されるようです（処理順ではない）

Comments

[yambejp]

Promise.all([
new Promise(resolve=>setTimeout(()=>resolve(1),300)),
new Promise(resolve=>setTimeout(()=>resolve(2),200)),
new Promise(resolve=>setTimeout(()=>resolve(3),400)),
new Promise(resolve=>setTimeout(()=>resolve(4),100)),
]).then(res=>{console.log(res)});