Angular13+RxJS7中lastValueFrom抛出ObjectUnsubscribedError求助

问题描述 #

项目基于Angular 13（版本^13.2.2）与RxJS 7（版本^7.5.4），使用lastValueFrom将HTTP请求的Observable转换为Promise时，抛出ObjectUnsubscribedError异常，报错发生在get方法的const promise = lastValueFrom(observable);行。

相关方法代码：

protected async get<U>(path: string, parameters?: Record<string, unknown>): Promise<U> {
    const url = this.buildUrl(path, parameters);
    const observable = this.http.get<U>(url, { observe: 'response' });
    const promise = lastValueFrom(observable);
    return promise.then((response) => this.onHttpResponse(response) as U);
}

排查发现 #

注释掉onDataLoaded方法中对this.adiComponents.changes的订阅代码后，异常消失。其中adiComponents是通过@ViewChildren(AdiComponent)声明的QueryList<AdiComponent<unknown>>，即使仅保留订阅逻辑、注释掉回调内的reloadForm()调用，异常仍会出现。onDataLoaded是在ngAfterViewInit的异步方法中调用的。

排查思路 #

• 检查QueryList订阅的生命周期时机：ngAfterViewInit中异步调用onDataLoaded，可能导致订阅adiComponents.changes时，组件视图已处于销毁或即将销毁的状态，或者异步操作延迟了订阅时机，此时QueryList已被自动取消订阅。
• 排查get方法与QueryList订阅的关联：确认onDataLoaded中的订阅逻辑是否间接触发了get方法，而触发时组件实例的上下文已失效。即使注释掉回调内容，订阅本身可能与组件的销毁状态绑定，引发连锁异常。
• 验证lastValueFrom的使用场景：HTTP请求的Observable默认是冷Observable，但如果调用get方法时组件已被销毁，http.get的Observable会被Angular的HttpClient自动取消订阅，导致lastValueFrom无法获取最后值而报错。可尝试给lastValueFrom添加默认值参数，或检查调用get时组件的生命周期状态。
• 规范QueryList的订阅管理：确保在组件销毁时及时取消对adiComponents.changes的订阅，避免内存泄漏和上下文异常。建议使用takeUntil配合组件销毁信号，或改用async管道处理订阅。
• 调试异步调用时序：添加日志打印组件生命周期钩子和方法调用的顺序，确认ngAfterViewInit的异步操作、QueryList订阅、get方法执行这三者的触发顺序，定位异常发生的时序节点。

内容的提问来源于stack exchange，提问作者MHogge