Angular RxJs 将订阅封装在被调用函数中

Question

当我们了解订阅 Observables 时，一个常见的例子是使用 http 请求： 给定一个通过 http 检索数据的服务方法，组件调用此方法，该方法返回一个 Observable，并且组件订阅该 Observable。最终 api 调用的结果被分配给组件属性：

在 apiService.ts 中

getPosts() {
    return this.http.get(...)
}

在 myComponent.ts 中：

apiService.getPosts()
   .subscribe(posts => this.posts = posts)

这看起来很难看。服务用于封装逻辑，但这里的逻辑分为进行异步 http 调用的服务和订阅返回的 Observable 的调用组件。

我希望两人都能服役，这样我就可以做到

在 myComponent.ts 中：

this.posts = apiService.getPosts()

这可能吗？当将订阅代码移至服务时，我们如何管理错误？

Answer 1

您可以使用从rxjs导出的await和firstValueFrom，它基本上将观察值转换为promise阅读此处

使你的函数异步放置 try 和 catch 来进行错误处理

对于前

import { firstValueFrom } from 'rxjs';

async getPosts() {
    try {
        this.posts = await firstValueFrom(apiService.getPosts());
    } catch (error) {
        console.error(error)
    }
}