如何从实现Observable的函数中返回填充完成的AppResponse对象

HTTP请求是异步操作，你当前的get1函数会在发起请求后直接返回刚初始化的空AppResponse实例，此时订阅的回调函数还未触发，实例的data字段自然还没被填充。

步骤1：改造 file2.ts 的get1方法 #

不要在方法内部订阅Observable，而是通过map操作符把HTTP响应转换成AppResponse实例后直接返回Observable对象：

import { map } from 'rxjs';

// 调整返回值类型为 Observable<AppResponse>
get1(endPoint: string): Observable<AppResponse> {
  return this.httpClient.get<IHttpResponse>(url).pipe(
    map((httpResponse: IHttpResponse) => {
      const appResponse = new AppResponse();
      appResponse.data = httpResponse.data;
      // 其他需要给AppResponse填充的字段也可以在此处处理
      return appResponse;
    })
  );
}

步骤2：改造 file1.ts 的调用逻辑 #

订阅get1返回的Observable，待异步请求完成拿到填充好的AppResponse实例后再赋值：

// 注意原代码中的this.file1.get1属于笔误，修正为file2的实例调用
getProfile() {
  this.file2.get1(endPoint).subscribe((filledAppRes: AppResponse) => {
    this.appResponse = filledAppRes;
  });
}

如果你更习惯用async/await的异步写法，可以借助RxJS的firstValueFrom方法把Observable转成Promise实现：

步骤1：改造 file2.ts 的get1方法 #

import { firstValueFrom } from 'rxjs';

// 调整返回值为Promise<AppResponse>
async get1(endPoint: string): Promise<AppResponse> {
  const httpResponse = await firstValueFrom(this.httpClient.get<IHttpResponse>(url));
  const appResponse = new AppResponse();
  appResponse.data = httpResponse.data;
  return appResponse;
}

步骤2：改造 file1.ts 的调用逻辑 #

async getProfile() {
  this.appResponse = await this.file2.get1(endPoint);
}

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