Angular中AbsService的getAbs方法返回订阅对象而非预期数据

• Angular的HttpClient所有请求方法返回的都是RxJS的可观察对象（Observable），代表未来会产生的异步数据流。
• 原代码的错误逻辑是：在getAbs方法内直接调用subscribe，而subscribe方法的返回值是用于管理订阅生命周期的Subscription实例，永远不会返回流内部处理的业务数据。
• subscribe回调内部的return语句仅作为回调函数的内部返回值，不会向外传递。这也是日志打印顺序异常的原因：getAbs方法同步执行时，立刻拿到subscribe返回的Subscription并向外传递，组件的同步日志代码会先执行打印订阅对象；等HTTP请求真正返回后，才会异步触发subscribe内的回调，打印处理后的数据和原始请求数据。

服务层改造 #

核心思路：把数据处理逻辑从subscribe回调内移到RxJS的流管道中，通过pipe+map操作符处理流数据，最终向外返回未被订阅的Observable，而非订阅实例。
改造后的服务代码：

// 移除废弃的旧http模块导入
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// 引入RxJS核心类型与操作符
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '../../environments/environment';
import { AbsModule } from './abs-module';

@Injectable()
export class AbsService {
    private apiUrl: string = environment.apiUrl;
    constructor(private http: HttpClient) { }

    // 明确返回类型为携带AbsModul实例的Observable，而非泛化的object
    getAbs(): Observable<AbsModule.AbsModul> {
        // 为http请求指定泛型，明确接口返回的数据结构
        return this.http.get<Partial<AbsModule.AbsModul>>(`${this.apiUrl}/abs/download`)
            .pipe(
                // 用map操作符在流内处理数据，处理后的结果会顺着流向下游传递
                map(rawData => {
                    const processedResult = this.assigneAbs(rawData);
                    // 原有日志逻辑可以保留，不影响数据流传递
                    console.log(processedResult);
                    console.log(rawData);
                    return processedResult;
                })
            )
    }

    private assigneAbs(data: Partial<AbsModule.AbsModul>): AbsModule.AbsModul {
        return Object.assign(new AbsModule.AbsModul(), data);
    }
}

组件层改造 #

由于Observable本身是异步流，不能直接同步读取值，需要在组件层通过subscribe订阅流，拿到处理后的结果：

@Component({})
export class TestClass  {
    constructor(
        private tests: AbsService
    ) {}

    test(): void {
        // 订阅服务返回的Observable，回调中拿到的就是经过assigneAbs处理的AbsModul实例
        this.tests.getAbs().subscribe(processedAbsInstance => {
            console.log(processedAbsInstance);
        })
    }
}

• 绝对不要在服务层提前调用subscribe把返回的Subscription实例向外传递，这是Angular异步开发中最常见的反模式。服务层的最佳实践是返回冷的Observable，由组件根据自身生命周期管理订阅（组件销毁时取消订阅，避免内存泄漏）。
• subscribe是RxJS的终结操作符，调用后才会触发实际的HTTP请求；如果服务层提前订阅，会导致请求在服务初始化时就被触发，和组件的调用逻辑脱钩。
• 可以移除原代码中无意义的@angular/http旧模块导入，该模块已被Angular官方废弃，和当前使用的HttpClient没有关联。

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