Angular 13通用REST API服务优化方案咨询

我正在开发一款适用于Angular 13的通用REST API调用客户端，单一资源的CRUD接口（如/evidence）可正常运行，但遇到/evidence/visit/{id}这类带嵌套层级的复杂端点时无法适配，寻求优化建议或方案调整思路。

原通用API服务 #

export class BaseService<T extends Base> {

  snackBar?: MatSnackBar;
  hp: MatSnackBarHorizontalPosition = 'right';
  vp: MatSnackBarVerticalPosition = 'top';

  constructor(
    private httpClient: HttpClient,
    @Inject(String) private url: string,
    @Inject(String) private endpoint: string
  ) { }

  httpOptions = {
    headers: new HttpHeaders({ "Content-Type": "application/json" })
  }

  //#region [ Public ]
  get(): Observable<T[]> {
    return this.httpClient
      .get<T[]>(`${this.url}/${this.endpoint}`)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

  getById(id: number): Observable<T> {
    console.log('endpoint: ' + this.endpoint);
    return this.httpClient
      .get<T>(`${this.url}/${this.endpoint}/${id}`)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

  post(item: T): Observable<T> {
    return this.httpClient
      .post<T>(`${this.url}/${this.endpoint}`, JSON.stringify(item), this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

  update(item: T): Observable<T> {
    return this.httpClient.patch<T>(`${this.url}/${this.endpoint}/${item.id}`, JSON.stringify(item), this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }

  delete(item: T) {
    console.log(this.url + this.endpoint + item.id);
    return this.httpClient.delete<T>(`${this.url}/${this.endpoint}/${item.id}`, this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }
  //#endregion

  //#region [ Private ]
  private handleError(error: HttpErrorResponse){
    let errorMessage = '';
    if(error.error instanceof ErrorEvent){
      //error client
      errorMessage = error.error.message;
    } else {
      //error server
      errorMessage = `Código do error: ${error.status}, ` + `mensagem: ${error.message}`;
    }
    return throwError(errorMessage);
  }
  //#endregion

}

原服务实现 #

export class EvidenciasService extends BaseService<RequisitosVisitasModel> {

  constructor(httpClient: HttpClient, public GS : GeneralService) {
    let endpoint: string = 'evidencias';
    super(
      httpClient,
      GS.Const.API_URI,
      this.GS.Const.ENDPOINT);
  }

}

原组件调用示例 #

export class RecepcionVisitasComponent implements OnInit { 
  
  constructor(private apiService: RecepcionVisitasService) {}

  getDatabyID() {
     this.apiService.getById(id).subscribe((data: any) => {     
        //result
     });
  }

}  

思路1：扩展基础服务的动态端点能力 #

给BaseService添加支持自定义路径片段的方法，兼容嵌套端点的同时保留原有CRUD方法的通用性。

修改后的BaseService核心调整 #

export class BaseService<T extends Base> {
  // 原有属性、构造函数、CRUD方法保持不变

  // 新增：支持多段路径的通用GET方法，适配嵌套场景
  getByPath(pathSegments: (string | number)[]): Observable<T | T[]> {
    const fullPath = `${this.url}/${this.endpoint}/${pathSegments.join('/')}`;
    return this.httpClient
      .get<T | T[]>(fullPath)
      .pipe(
        retry(1),
        catchError(this.handleError)
      );
  }

  // 可选：重载getById，支持父级ID+资源ID的嵌套场景
  getById(parentId: number, resourceId?: number): Observable<T | T[]> {
    let fullPath = `${this.url}/${this.endpoint}/${parentId}`;
    if (resourceId) fullPath += `/${resourceId}`;
    return this.httpClient
      .get<T | T[]>(fullPath)
      .pipe(
        retry(1),
        catchError(this.handleError)
      );
  }
}

组件调用示例 #

getDatabyVisitID(visitId: number) {
  // 调用新增的getByPath方法适配/evidence/visit/{id}
  this.apiService.getByPath(['visit', visitId]).subscribe((data) => {
    // 处理返回结果
  });
}

思路2：为复杂端点创建专用服务类 #

如果嵌套资源有独立业务逻辑，可继承BaseService后扩展专属方法，避免污染通用服务：

示例：EvidenciasVisitasService #

export class EvidenciasVisitasService extends BaseService<RequisitosVisitasModel> {
  constructor(httpClient: HttpClient, public GS: GeneralService) {
    super(httpClient, GS.Const.API_URI, 'evidencias');
  }

  // 专属方法：获取指定visit下的evidence
  getByVisitId(visitId: number): Observable<RequisitosVisitasModel[]> {
    return this.httpClient
      .get<RequisitosVisitasModel[]>(`${this.url}/${this.endpoint}/visit/${visitId}`)
      .pipe(
        retry(1),
        catchError(this.handleError)
      );
  }
}

思路3：动态端点模板注入 #

允许实例化服务时传入带占位符的端点模板，使用时替换占位符：

修改BaseService构造函数与方法 #

export class BaseService<T extends Base> {
  constructor(
    private httpClient: HttpClient,
    @Inject(String) private url: string,
    @Inject(String) private endpointTemplate: string // 改为带占位符的模板，如'evidence/visit/{visitId}'
  ) { }

  // 新增：替换模板占位符并发起请求
  getByTemplate(params: Record<string, string | number>): Observable<T | T[]> {
    let fullPath = `${this.url}/${this.endpointTemplate}`;
    Object.entries(params).forEach(([key, value]) => {
      fullPath = fullPath.replace(`{${key}}`, value.toString());
    });
    return this.httpClient
      .get<T | T[]>(fullPath)
      .pipe(
        retry(1),
        catchError(this.handleError)
      );
  }

  // 原有CRUD方法可根据模板逻辑调整，或保留兼容
}

组件调用示例 #

getDatabyVisitID(visitId: number) {
  this.apiService.getByTemplate({ visitId }).subscribe((data) => {
    // 处理返回结果
  });
}

额外优化建议 #

• 统一路径拼接：使用HttpClient的HttpParams处理查询参数，避免手动拼接出错
• 错误处理增强：在handleError中添加日志上报，或根据错误码返回针对性提示
• 类型安全：为复杂端点的返回值定义明确的TypeScript接口，避免使用any

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