Angular Typescript项目中重复代码的重构方案咨询

核心思路 #

• 抽离重复的请求调用、默认参数处理、返回值映射逻辑为独立的公共方法，原有业务方法直接复用该方法即可，消除重复代码的同时提升可维护性，后续如果要修改请求逻辑只需要调整一处。
• 支持可选的自定义参数扩展，适配后续可能出现的非默认分页、额外查询条件的需求。

优化后代码示例 #

// 抽离的公共请求方法，可被所有需要调用该搜索接口的业务方法复用
private fetchStockSearchData(id: string, searchMeta = this.service.getSearchMetaDefaults()): Observable<{
  searchResult: IStockResult[];
  searchCount: number;
}> {
  return this.service
    .search(id, searchMeta)
    .pipe(
      map(response => ({
        searchResult: response, 
        searchCount: response.meta.totalResourceCount
      }))
    );
}

// 原有业务方法直接复用公共方法即可，无需重复写请求逻辑
getStockData(id: string): Observable<{
  searchResult: IStockResult[];
  searchCount: number;
}> {
  return this.fetchStockSearchData(id);
}

// 另一个之前重复的分页业务方法，有自定义参数的话也可以直接传入
getStockDataWithPagination(id: string, page: number, pageSize: number): Observable<{
  searchResult: IStockResult[];
  searchCount: number;
}> {
  const customMeta = {
    ...this.service.getSearchMetaDefaults(),
    page,
    pageSize
  };
  return this.fetchStockSearchData(id, customMeta);
}

可选额外优化点 #

• 如果返回值的类型{searchResult: IStockResult[]; searchCount: number}多处使用，可以单独抽成自定义类型type StockSearchResponse或者接口，减少重复的类型定义代码。
• 如果后续需要给该搜索接口加通用的异常处理、缓存逻辑，也可以直接加在抽离的fetchStockSearchData方法中，所有调用方自动生效。

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