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

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

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

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Q&A

解決済

1回答

525閲覧

VUEにおける非同期処理について

takk_014

総合スコア53

Vue.js

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

0グッド

0クリップ

投稿2021/09/09 05:51

編集2021/09/09 05:57

VUEでボタンを押した時に発動する「createEmptyDataListメソッド」で非同期処理をしたいです。
下記がcreateEmptyDataListメソッドのコードになります。

Javascript

1createEmptyDataList(){ 2 if(this.dataList.length == 0){ 3 for(let n=0;n<9;n++){ 4 if(n=0){ 5 this.emptyDataList.DeviceName = 'hogehoge1'; 6 this.emptyDataList.ConnectFlg = '-'; 7 this.emptyDataList.CustID = this.strCustID; 8 this.emptyDataList.CustName = this.strCustNM; 9 } 10 if(n=1){ 11 this.emptyDataList.DeviceName = 'hogehoge2'; 12 this.emptyDataList.ConnectFlg = '-'; 13 this.emptyDataList.CustID = this.strCustID; 14 this.emptyDataList.CustName = this.strCustNM; 15 } 16 if(n=2){ 17 this.emptyDataList.DeviceName = 'hogehoge3'; 18 this.emptyDataList.ConnectFlg = '-'; 19 this.emptyDataList.CustID = this.strCustID; 20 this.emptyDataList.CustName = this.strCustNM; 21 } 22 if(n=3){ 23 this.emptyDataList.DeviceName = 'hogehoge4'; 24 this.emptyDataList.ConnectFlg = '無'; 25 this.emptyDataList.CustID = this.strCustID; 26 this.emptyDataList.CustName = this.strCustNM; 27 } 28 if(n=4){ 29 this.emptyDataList.DeviceName = 'hogehoge5'; 30 this.emptyDataList.ConnectFlg = '無'; 31 this.emptyDataList.CustID = this.strCustID; 32 this.emptyDataList.CustName = this.strCustNM; 33 } 34 if(n=5){ 35 this.emptyDataList.DeviceName = 'hogehoge6'; 36 this.emptyDataList.ConnectFlg = '無'; 37 this.emptyDataList.CustID = this.strCustID; 38 this.emptyDataList.CustName = this.strCustNM; 39 } 40 if(n=6){ 41 this.emptyDataList.DeviceName = 'hogehoge7'; 42 this.emptyDataList.ConnectFlg = '無'; 43 this.emptyDataList.CustID = this.strCustID; 44 this.emptyDataList.CustName = this.strCustNM; 45 } 46 if(n=7){ 47 this.emptyDataList.DeviceName = 'hogehogeGPS'; 48 this.emptyDataList.ConnectFlg = '無'; 49 this.emptyDataList.CustID = this.strCustID; 50 this.emptyDataList.CustName = this.strCustNM; 51 } 52 if(n=8){ 53 this.emptyDataList.DeviceName = 'hogehogeBAC'; 54 this.emptyDataList.ConnectFlg = '無'; 55 this.emptyDataList.CustID = this.strCustID; 56 this.emptyDataList.CustName = this.strCustNM; 57 } 58 this.saveData(this.emptyDataList); 59 60 } 61 location.reload(); 62 } 63 },

saveDataメソッドにはpostを使った非同期な処理が書かれています。
このコードはforで回して何度もsaveDataメソッドを実行するので実行中のsaveDataメソッドの通信を待たずに新たなsaveDataメソッドを実行してしまいます。
そのため最後のsaveDataメソッドしか通信が成功しません。
一つ一つのsaveDataメソッドの通信を待機させるようにするにはどうすれば良いでしょうか?

自分なりに非同期処理については調べたのですがいくつも方法がある上に記述の仕方についても不明点が多くて分かりませんでした。
ご教授よろしくお願い致します。

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

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

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

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

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

ku__ra__ge

2021/09/09 06:16

1. どのような結果を期待して、実際にはどのような結果になったのかを具体的に書いてください。なにをもって最後のsaveDataメソッドしか通信が成功しないと判断したのですか? 2. saveDataメソッドの内容を書いてください。saveDataメソッド側を変えなければ非同期処理が終わるのを待つのは不可能な場合もあります。
guest

回答1

0

ベストアンサー

if(n=*){

演算子が等号になっているのでデータ投入になっています

投稿2021/09/09 06:05

編集2021/09/09 06:05
yambejp

総合スコア115012

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

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

takk_014

2021/09/09 06:20

教えていただきありがとうございます。 指摘していただいた点を修正したらうまく動作しました。 ケアレスミスしないように気をつけます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問