vueで非同期処理をまとめて処理する際のベストプラクティス

vue.jsで非同期処理をまとめて処理したい場合があります。

普通に1つ1つ処理を待つ場合は async - awaitで良いのですが、それだと1つずつしか処理できないので、どうしても処理が遅くなってしまいます。

そんな時は、 Promise.all を使えば、複数の非同期処理をまとめて処理しつつ、全ての処理が完了したら次に行きますよー！というふうにできます。

// 非同期をまとめて処理する
async process() {
    await Promise.all([
        this.methodA(),
	this.methodB(),
	this.methodC(),
    ]);
    
    await this.methodD()
},

上記の例の場合は methodA, methodB, methodCを同時平行で処理を行い、全ての処理が終わったら methodD を行うというようになります。

なるべく処理の時間を短くするために同時平行で処理を進めていきましょう！