帶有 await/async 的異步函數調用在 angular 中不起作用

Question

我正在使用 Angular，我在異步函數調用方面遇到了問題。

async ngOnInit() {
    this.a = new A();
    await this.a.method_A();

    this.b = new B(this.a);
    this.b.method_B(this.a.data);
}

export class A {
    data;
    async method_A() {
        observable$.subscribe((data) => { this.data = data });
    }
}

method_A是一個異步函數，所以要保證method_A完成后， b要實例化， method_B要被調用。 所以，我像上面一樣使用了await/async ，但我仍然發現在method_A完成之前創建了實例b 。 有沒有辦法按順序執行這些步驟？

Answer 1

async method_A() {
    observable$.subscribe((data) => { this.data = data });
}

method_A不會等待observable$發出。 什么是observable$ ，順便說一句？ 它只發射一次嗎？ 如果是這樣，您可以輕松地將其轉換為 async-await 模式

async method_A() {
    const data = await observable$.toPromise();
    this.data = data;
}

或者，由於toPromise已被棄用或即將被棄用，

async method_A() {
    const data = await firstValueFrom(observable$);
    this.data = data;
}

（如果observable$發出不止一次，我建議放棄async-await模式而只使用 RxJS）。

Answer 2

這是一篇文章，它將為您提供有關Observable和async / await RxJS Observable 與 Promises 和 Async-Await 互操作的更多背景信息。

事件雖然您的函數被標記為async但它會在調用后立即返回，然后訂閱observable$可以運行並將值分配給data字段。 您必須將Observable第一項轉換為Promise ，而不是訂閱 observable ，然后您可以await並確保僅在從 observable 設置data后繼續執行ngOnInit ：

export class A {
    data;
    async method_A() {
        this.data = await observable$.first().toPromise();
    }
}

Answer 3

我認為您需要在 observable 調用中使用 await 。 為了更好地理解，請查看此文檔。
https://medium.com/@balramchavan/using-async-await-feature-in-angular-587dd56fdc77#:~:text=An%20async%20function%20can%20contain,and%20returns%20the%20resolved%20value 。

async ngOnInit() {
    this.a = new A();
    await this.a.method_A();

    this.b = new B(this.a);
    this.b.method_B(this.a.data);
}

export class A {
    data;
    async method_A() {
      await observable$.subscribe((data) => { this.data = data }); //here
    }
}