Angular Rxjs如何从Observable<CustomApiResponse>提取属性返回目标Observable

你现有代码的问题在于在getCategories方法中直接调用了subscribe，导致方法没有返回Observable<Category[]>类型的对象，且subscribe回调内的返回值不会作为方法的返回值生效。你需要使用RxJS的map操作符对流内数据做转换，直接返回转换后的Observable即可。

第一步：导入依赖 #

import { map, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

第二步：重写getCategories方法 #

export class CategoryService {
  url: String = "/api_category";
  constructor(private httphelper: HttpHelperService) { }

  getCategories(url: string): Observable<Category[]> {   
    return this.httphelper.GetData(url).pipe(
      map(val => {
        if (!val.isSucess) {
          // 业务错误抛出，可在组件subscribe的error回调中捕获处理
          throw new Error(val.error || '请求失败');
        }
        // 类型断言指定返回值为Category[]
        return val.value as Category[];
      }),
      catchError(err => {
        // 可统一处理Http层错误，比如日志上报等
        console.error('请求出错：', err);
        return throwError(() => err);
      })
    );
  }
}

逻辑说明 #

• 不需要在业务服务层对Observable做订阅，只需要通过pipe方法组合操作符对数据流做转换，最终返回转换后的Observable即可，订阅操作放在组件层执行就可以和你现有组件代码完全兼容。
• map操作符会接收上游Observable发送的CustomApiResponse实例，处理后返回业务需要的Category[]类型传递给下游。
• 可选的错误处理逻辑可以统一拦截业务错误和Http请求错误，避免每处调用都重复写判断逻辑。

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