Angular RestProvider服务HTTP请求逻辑封装公共函数重构方法咨询

核心思路是将所有请求复用的参数处理、请求配置、重试/错误捕获等通用逻辑，封装为支持泛型的公共调用函数，不同业务请求仅需传入差异化的接口路径、返回类型、请求参数即可，后续公共逻辑调整只需修改一处即可全局生效。

封装公共请求方法 #

在你的rest-provider服务中新增私有公共GET请求函数：

// 泛型T对应接口返回值的类型
private requestGet<T>(apiPath: string, _params: Record<string, any> = {}): Observable<T> {
    // 统一处理请求参数序列化
    let params = new HttpParams();
    for (let key in _params) {
      if (_params.hasOwnProperty(key)) {
        params = params.set(key, _params[key]);
      }
    }
    
    // 统一处理请求配置、公共管道逻辑
    return this.http
      .get<T>(`${this.env.API_URL}${apiPath}`, { headers: this.headers, params: params })
      .pipe(
        retry(this.retries),
        catchError(this.handleError)
      )
}

重构原有业务请求函数 #

原来的两个请求方法可以简化为如下代码，完全消除重复逻辑：

getStepMenu(_params): Observable<StepMenu> {
  return this.requestGet<StepMenu>('api/step_menu', _params);
}

getStepInfo(_params): Observable<StepInfo> {
  return this.requestGet<StepInfo>('api/step_info', _params);
}

可选扩展：支持多种请求方式 #

如果需要兼容POST、PUT、DELETE等其他请求类型，可以进一步封装更通用的请求函数：

private request<T>(
  method: 'get' | 'post' | 'put' | 'delete',
  apiPath: string,
  data: Record<string, any> = {}
): Observable<T> {
    let params = new HttpParams();
    let body = {};

    // GET/DELETE 参数放在query，POST/PUT 参数放在请求体
    if(['get', 'delete'].includes(method)) {
      for (let key in data) {
        if (data.hasOwnProperty(key)) {
          params = params.set(key, data[key]);
        }
      }
    } else {
      body = data;
    }

    return this.http
      .request<T>(method, `${this.env.API_URL}${apiPath}`, {
        headers: this.headers,
        params,
        body
      })
      .pipe(
        retry(this.retries),
        catchError(this.handleError)
      )
}

// 业务层调用示例
postCreateStep(data): Observable<StepInfo> {
  return this.request<StepInfo>('post', 'api/create_step', data);
}

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