質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

nt4c
nt4c

総合スコア768

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

0クリップ

196閲覧

投稿2022/12/02 05:41

前提

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

問題

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

js

1const que = [ 2 axios.get('******/hoge'), 3 axios.get('******/fuga') 4] 5new Vue({ 6 el: '#app', 7 data() { 8 return { 9 result: null, 10 result2: null 11 } 12 }, 13 mounted() { 14 this.getData() 15 }, 16 methods: { 17 async getData() { 18 const [data1, data2] = await Promise.all(que) 19 this.result = data1.hoge 20 this.result2 = data2.fuga 21 setTimeout(this.getData, 5000) 22 } 23 } 24})

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

js

1new Vue({ 2 el: '#app', 3 data() { 4 return { 5 result: null, 6 result2: null 7 } 8 }, 9 mounted() { 10 this.getData() 11 }, 12 methods: { 13 async getData() { 14 const [data1, data2] = await Promise.all([ 15 axios.get('******/hoge'), 16 axios.get('******/fuga') 17 ]) 18 this.result = data1.hoge 19 this.result2 = data2.fuga 20 setTimeout(this.getData, 5000) 21 } 22 } 23})

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

nt4c

2022/12/02 07:41

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

回答2

1

ベストアンサー

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

例1

javascript

1const que=[ 2 new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),3000)), 3 new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),4000)), 4 new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),2000)), 5 ]; 6setInterval(async ()=>{ 7 await Promise.all(que).then(console.log); 8},1000);

例2

javascript

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

例3

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

javascript

1const que=()=>[ 2 new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),3000)), 3 new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),4000)), 4 new Promise(resolve=>setTimeout(()=>resolve(new Date().getTime()),2000)), 5 ]; 6setInterval(()=>{ 7 Promise.all(que()).then(console.log); 8},1000);

投稿2022/12/02 06:06

yambejp

総合スコア109126

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

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

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

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

投稿2022/12/02 06:16

int32_t

総合スコア17258

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。