setTimeoutでループするPromise.allがスキップされる

Question

前提

解決方法は分かるのですが、何故以下のような状態になるのかご教授お願いします。

問題

下記のような5秒毎にAPIと通信を行いデータを更新するコードを実行した際、初回のデータ取得は行えるのですが２回目以降のPromise.allがスキップされます。

const que = [
  axios.get('******/hoge'),
  axios.get('******/fuga')
]
new Vue({
  el: '#app',
  data() {
    return {
      result: null,
      result2: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const [data1, data2] = await Promise.all(que)
      this.result = data1.hoge
      this.result2 = data2.fuga
      setTimeout(this.getData, 5000)
    }
  }
})

しかし、次のように変更するとスキップされず期待する結果となります。

new Vue({
  el: '#app',
  data() {
    return {
      result: null,
      result2: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const [data1, data2] = await Promise.all([
        axios.get('******/hoge'),
        axios.get('******/fuga')
      ])
      this.result = data1.hoge
      this.result2 = data2.fuga
      setTimeout(this.getData, 5000)
    }
  }
})

なぜ変数に代入した状態とそうでない場合とで結果が異なるのでしょうか？

Comments

[nt4c]

お二方とも回答ありがとうございました。
頂いた回答で問題のイメージが掴めました。

Answer 1

前者はqueに残った結果を表示しているだけで、後者は常に呼び出しているからですね
以下でイメージできるでしょうか？

例1

const que=[
  new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),3000)),
  new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),4000)),
  new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),2000)),
  ];
setInterval(async ()=>{
  await Promise.all(que).then(console.log);
},1000);

例2

setInterval(async ()=>{
  await Promise.all([
    new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),3000)),
    new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),4000)),
    new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),2000)),
  ]).then(console.log);
},1000);

例3

どうしても外だししたいならこう

const que=()=>[
  new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),3000)),
  new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),4000)),
  new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),2000)),
  ];
setInterval(()=>{
  Promise.all(que()).then(console.log);
},1000);

Answer 2

なぜ変数に代入した状態とそうでない場合とで結果が異なるのでしょうか？

変数に入れているかどうかは関係なくて、axios.get() を呼んだ回数(Promiseインスタンスを作った回数)の問題です。

前者は最初の getData() の前に2回呼んでいるだけ、後者は getData() が呼ばれる毎に2回ずつ呼んでいます。

1回の axios.get() 呼び出しで作った1つのPromiseでリクエストを複数回送ることはできません。