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

Question

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

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

  // 各画面初期化処理
  async clear() {
　　console.log('a');
    ret = await this.setupData();
　　console.log('b');
    if (ret){
　　console.log('c');
      // 何らかの処理
    }
　　console.log('d');
  }
  protected async setupData() {
　　console.log('a-1');
    if (!this.viewInitialized) {
      this.setupDataRequired = true;
      return false;
    }
　　console.log('a-2');
    await this.SubComponentA.setupData(); //(A)   内部で1,2,3,4とログが出るものとする
　　console.log('a-3');
    await this.SubComponentB.setupData(); //(B)
　　console.log('a-4');
    return true;
  }

• 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

Comments

[maisumakun]

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

[int32_t]

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

[JETMACHINE]

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

よろしくお願いいたします。

[maisumakun]

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

[JETMACHINE]

早々にご質問いただきありがとうございます。

int32_t様

clear()は
　　await this.clear();
のように呼び出しています。
この処理を記述しているところは様々で
何かの項目が変更された時のイベントハンドラや
ボタンをクリックされた時などになります。

maisumakun様

コンソールにはデバッグ出力以外のエラーは出ません。
「// 何らかの処理」の部分で、(A),(B)処理が完了していませんので
このタイミングでエラーが発生します。

よろしくお願いいたします。

[dameo]

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

[dameo]

もし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しないで開始していてその中でログ出力してれば再現可能ということです。

Answer 1

ご質問頂きありがとうございます。

もう一度全体のソースを調べ直してみたところ、
問題の原因が別の所にあることがわかりました。

await/asyncの多重呼び出しで実際には処理は想定通り処理完了を待っていました。

ログの出方などはこちらの勘違いでした。

大変ご迷惑をおかけしましたが、皆さんの冷静な意見を頂き
別の原因を見つけることができました。

別の原因については使用している有償コンポーネントの問題のようですので、
そちらを確認してみます。