使用 await/async 的异步函数调用在 Angular 中不起作用答案

【问题标题】：Asynchronous function call with await/async does not work in angular使用 await/async 的异步函数调用在 Angular 中不起作用
【发布时间】：2021-01-17 13:56:36
【问题描述】：

我正在使用 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，但我仍然发现实例b是在method_A完成之前创建的。有没有办法让这些步骤按顺序执行？

【问题讨论】：

你应该构建你的函数和调用有点不同。你的method_B 调用应该在你的.subscribe 块内，因为这意味着：一旦可观察的发射（数据准备好）> 使用该数据调用method_B。现在，如果您的method_A 中还有其他未在此处显示的内容，例如，其他一些可观察的（例如http 调用），那么您可能需要查看switchMap, concatMap 或类似的运算符。 observables 的全部意义在于在整个流程发生之前对其进行建模，然后在一个地方订阅。这样你就不需要await 任何东西。

标签： javascript angular asynchronous async-await

【解决方案1】：

这篇文章将为您提供有关 Observable 和 async/await RxJS Observable interop with Promises and Async-Await 的更多背景信息。

尽管您的函数被标记为async，但它在调用后立即返回，然后订阅observable$ 可以运行并为data 字段赋值。您必须将Observable 的第一项转换为Promise，而不是订阅observable，然后您可以await 并确保ngOnInit 的执行仅在从observable 设置data 后继续：

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

【讨论】：

【解决方案2】：

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

method_A 不会等待observable$ 发出。什么是observable$，顺便说一句？它只发射一次吗？如果是这样，您可以使用

轻松将其转换为异步等待模式

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）。

【讨论】：

非常感谢你们，我解决了，我很紧急，所以没有太多研究就快速询问，async/await 应该与 Promise 保持一致。所有文章都非常有帮助。使用 async/await，从 observable 切换到 promise，我觉得有点奇怪。

【解决方案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
    }
}

【讨论】：

这不会像你期望的那样工作。您正在await订阅一个订阅对象，无论如何您都会立即获得它。