时间戳

首页 > 解决方案 > 将 http 调用包装到共享函数中

javascript - 将 http 调用包装到共享函数中

问题描述

我有一个休息提供者服务，其中包含我所有的 http 调用。但是，每个函数都重用了很多相同的 http 代码，似乎我应该将它包装到一个共享函数中，以防我想更改其中的任何内容

如您所见，这两个功能几乎完全相同，只是 url 发生了变化。如何重构此代码以不在我的所有函数中重用相同的代码？

getStepMenu(_params): Observable<StepMenu> {
    // Add params
    let params = new HttpParams();

    for (let key in _params) {
      if (_params.hasOwnProperty(key)) {
        params = params.set(key, _params[key]);
      }
    }
    
    return this.http
      .get<StepMenu>(this.env.API_URL + 'api/step_menu', { headers: this.headers, params: params })
      .pipe(
        retry(this.retries),
        catchError(this.handleError)
      )
  }


getStepInfo(_params): Observable<StepInfo> {
    // Add params
    let params = new HttpParams();

    for (let key in _params) {
      if (_params.hasOwnProperty(key)) {
        params = params.set(key, _params[key]);
      }
    }

    return this.http
      .get<StepInfo>(this.env.API_URL + 'api/step_info', { headers: this.headers, params: params })
      .pipe(
        retry(this.retries),
        catchError(this.handleError)
      )
  }

标签： javascriptangularionic-frameworktypesrxjs

解决方案

我看到的唯一区别是 api 路径，您可以将其作为方法参数传递，如下所示：

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

  callStepApi(path, _params): Observable<StepInfo> {
    // Add params
    let params = new HttpParams();
    let url = this.env.API_URL + path;

    for (let key in _params) {
      if (_params.hasOwnProperty(key)) {
        params = params.set(key, _params[key]);
      }
    }

    return this.http
        .get<StepInfo>(url, { headers: this.headers, params: params })
        .pipe(
            retry(this.retries),
            catchError(this.handleError)
        )
  }

您可以通过订阅返回的 obserables 以相同的方式调用它：

getStepInfo(params).subscribe();
getStepMenu(params).subscribe();

推荐阅读