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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

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

Q&A

解決済

1回答

814閲覧

async function内でPromiseを返す関数にawaitをつけないのはアリ?ナシ?

KuwabataK

総合スコア306

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

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

0グッド

1クリップ

投稿2019/04/15 13:19

編集2019/04/15 13:39

コードの質問というより、こういう書き方についてどう思いますか?っていう意見を聞きたいです。
サイトの趣旨に合わないようであれば削除したいと思います

前提・実現したいこと

他人から引き継いだVueのコードをメンテしているときに、以下のようなコードに出会いました(擬似コードで申し訳ないですが)

async function promise(){ ...略 this.$store.dispatch('DO_SOMETHING') // this.$store.dispatchは非同期に実行され、Promiseを返す ... }

これを見たときに、てっきりawaitのし忘れかな?と思ったのですが、聞いてみると意図的にそうしているとのことでそのプロジェクトでは高速化のために極力awaitをつけない方針でやっているようでした。
まあ確かにasync/awaitがなかった頃は、後続処理がないときはcallback関数とか投げっぱなしで書いていたのでわからなくはないなと思ったのですが、async functionにしている以上は、function内の処理が全て終わってからresolve()するべきじゃないの?とも思ってしまってもやもやしています。

ここらへん、皆さんはどう考えられますか?いろんな方の意見を聞いてみたいです

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

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

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

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

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

guest

回答1

0

ベストアンサー

async内でawaitしないならasyncしなくていいのにとは思いますが
考え方としてはawaitしたら効くように常にasyncしているだけかもしれないのでなんとも・・・
以下挙動の違いを見てもらえば課題は見えると思います
(なにもawaitしなかったり、中途半端にawaitしたときの挙動をきちんと想定して
運用しているならOK)

  • きちんとawaitする

出力:1,2,3,4,end

javascript

1const hoge=async ()=>{ 2 await new Promise(resolve=>{ 3 setTimeout(()=>{ 4 return resolve(1); 5 },2000); 6 }).then(data=>{ 7 console.log(data); 8 }); 9 await new Promise(resolve=>{ 10 setTimeout(()=>{ 11 return resolve(2); 12 },1500); 13 }).then(data=>{ 14 console.log(data); 15 }); 16}; 17const fuga=async ()=>{ 18 await new Promise(resolve=>{ 19 setTimeout(()=>{ 20 return resolve(3); 21 },1000); 22 }).then(data=>{ 23 console.log(data); 24 }); 25 await new Promise(resolve=>{ 26 setTimeout(()=>{ 27 return resolve(4); 28 },500); 29 }).then(data=>{ 30 console.log(data); 31 }); 32}; 33 34(async ()=>{ 35 await hoge(); 36 await fuga(); 37 console.log("end"); 38})();
  • なにもawaitしない

出力:end,4,3,2,1

javascript

1const hoge=async ()=>{ 2 new Promise(resolve=>{ 3 setTimeout(()=>{ 4 return resolve(1); 5 },2000); 6 }).then(data=>{ 7 console.log(data); 8 }); 9 new Promise(resolve=>{ 10 setTimeout(()=>{ 11 return resolve(2); 12 },1500); 13 }).then(data=>{ 14 console.log(data); 15 }); 16}; 17const fuga=async ()=>{ 18 new Promise(resolve=>{ 19 setTimeout(()=>{ 20 return resolve(3); 21 },1000); 22 }).then(data=>{ 23 console.log(data); 24 }); 25 new Promise(resolve=>{ 26 setTimeout(()=>{ 27 return resolve(4); 28 },500); 29 }).then(data=>{ 30 console.log(data); 31 }); 32}; 33 34(async ()=>{ 35 await hoge(); 36 await fuga(); 37 console.log("end"); 38})();
  • 中途半端なawait

出力:1,4,end,3,2

javascript

1const hoge=async ()=>{ 2 await new Promise(resolve=>{ 3 setTimeout(()=>{ 4 return resolve(1); 5 },2000); 6 }).then(data=>{ 7 console.log(data); 8 }); 9 new Promise(resolve=>{ 10 setTimeout(()=>{ 11 return resolve(2); 12 },1500); 13 }).then(data=>{ 14 console.log(data); 15 }); 16}; 17const fuga=async ()=>{ 18 new Promise(resolve=>{ 19 setTimeout(()=>{ 20 return resolve(3); 21 },1000); 22 }).then(data=>{ 23 console.log(data); 24 }); 25 await new Promise(resolve=>{ 26 setTimeout(()=>{ 27 return resolve(4); 28 },500); 29 }).then(data=>{ 30 console.log(data); 31 }); 32}; 33 34(async ()=>{ 35 await hoge(); 36 await fuga(); 37 console.log("end"); 38})();

投稿2019/04/16 01:15

yambejp

総合スコア114572

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

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

KuwabataK

2019/04/17 00:26

ありがとうございます。 確かにケースバイケースですよね ただ個人的な感覚としては 上げていただいたコードだと、呼び出し側はすべて同じ呼び出し方をしているのに 出力順が変わるのは、なんだか気持ち悪いなと思ってしまいました 非同期処理周りでバグが出たときに、async関数の中まで追ってデバッグしたくないなあとか思ってしまいます。 個人開発なら別に問題ないんでしょうけれど
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問