await/asyncの多重呼び出しで中の処理が終わるまで待ちたい

typescriptでのasync付きメソッドをawaitで呼び出しさらにその内部でasync付きメソッドawaitを付けた
を呼び出した際にそのメソッドの処理の終了を待たずに最初のメソッドが終了してしまいます。

typescript
1  // 各画面初期化処理
2  async clear() {
3　　console.log('a');
4    ret = await this.setupData();
5　　console.log('b');
6    if (ret){
7　　console.log('c');
8      // 何らかの処理
9    }
10　　console.log('d');
11  }
12  protected async setupData() {
13　　console.log('a-1');
14    if (!this.viewInitialized) {
15      this.setupDataRequired = true;
16      return false;
17    }
18　　console.log('a-2');
19    await this.SubComponentA.setupData(); //(A)   内部で1,2,3,4とログが出るものとする
20　　console.log('a-3');
21    await this.SubComponentB.setupData(); //(B)
22　　console.log('a-4');
23    return true;
24  }
25

clearメソッド

画面の初期化処理

setupDataメソッド

画面に初期値として表示させる値を
サーバーから取得したうえで、画面のコンポーネントにセットする処理
実際には子コンポーネントのsetupDataを呼び出している。
子コンポーネントのsetupDataではサーバーから表示に必要なデータの取得を実装している。

この時「// 何らかの処理」の部分では(A),(B)で呼び出しているメソッドの処理が
完了していることを期待しているのですが、実際には完了していません。

ログの順番でいうと
a → a-1　→　a-2　→　1　→　2　→　3　→　a-3 ・・・
という動きをさせたいのですが、実際には
a → a-1　→　a-2　→　b　→　c　→　1　→　2 ・・・
のような動きをします。

想定のような動きをさせるにはどのようにすればよいでしょうか。

環境は以下の通りになります。
Angular8.2.14、Typescript3.5.3

maisumakun

2021/10/19 02:05

this.SubComponentA.setupDataやthis.SubComponentB.setupDataもasyncな関数ですか？

int32_t

2021/10/19 02:11

clear() をどうやって呼んでますか?

JETMACHINE

2021/10/19 02:12

ご質問ありがとうございます。 this.SubComponentA.setupDataやthis.SubComponentB.setupDataもasyncな関数となっております。よろしくお願いいたします。

maisumakun

2021/10/19 02:14

コンソールにデバッグ出力以外のエラーが出ていたりはしませんか？

JETMACHINE

2021/10/19 02:29

早々にご質問いただきありがとうございます。 int32_t様 clear()は　　await this.clear(); のように呼び出しています。この処理を記述しているところは様々で何かの項目が変更された時のイベントハンドラやボタンをクリックされた時などになります。 maisumakun様コンソールにはデバッグ出力以外のエラーは出ません。「// 何らかの処理」の部分で、(A),(B)処理が完了していませんのでこのタイミングでエラーが発生します。よろしくお願いいたします。

退会済みユーザー

2021/10/20 00:55

上手く動かないときの記述が a → a-1　→　a-2　→　b　→　c　→　1　→　2 ・・・となっていますが a-3 より b が早く出ることなんてあるんでしょうか？

退会済みユーザー

2021/10/20 00:58

もしa-3が抜けているだけなら、例えば↓のコードで再現できます。 class SubComponent { public async setupData(): Promise<void> { new Promise((resolve) => setTimeout(resolve, 0)).then(() => [...Array(3)].forEach((_, i) => console.log(i + 1)) ); // returnもawait していない } } class Component { protected SubComponentA: SubComponent = new SubComponent(); async clear(): Promise<void> { console.log("a"); const ret: boolean = await this.setupData(); console.log("b"); if (ret) { console.log("c"); // 何らかの処理 } console.log("d"); } protected async setupData(): Promise<boolean> { console.log("a-1"); console.log("a-2"); await this.SubComponentA.setupData(); //(A) 内部で1,2,3,4とログが出るものとする console.log("a-3"); return true; } } (async () => { new Component().clear(); })(); this.SubComponentA.setupData()内で非同期コードをawaitしないで開始していてその中でログ出力してれば再現可能ということです。