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

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

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

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

JavaScript

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

Q&A

解決済

2回答

496閲覧

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

nt4c

総合スコア768

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿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})

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nt4c

2022/12/02 07:41

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

回答2

0

ベストアンサー

前者は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

総合スコア114399

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

投稿2022/12/02 06:16

int32_t

総合スコア20551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問