【问题标题】:Wrap http call into shared function将 http 调用包装到共享函数中
【发布时间】:2023-03-29 08:51:01
【问题描述】:

我有一个 rest-provider 服务,它包含我所有的 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)
      )
  }

【问题讨论】:

    标签: javascript angular ionic-framework types rxjs


    【解决方案1】:

    我看到的唯一区别是 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();
    

    【讨论】:

    • 我认为这行不通。 callStepApi 中的返回实际上并没有调用 api。
    • @user2570937 只有在订阅 observable 后才会调用该 API。因此,您可以执行getStepInfo(_params).subscribe()getStepMenu(_params).subscribe() 之类的操作以进行 api 调用。
    • 是的,我是从前面的代码开始的。但是它仍然没有调用 api
    • @user2570937,您是否在控制台中看到任何错误。实际上应该没有任何区别。
    • 这很奇怪。如果我使用这条线,它可以工作: .get(this.env.API_URL + 'api/step_info', { headers: this.headers, params: params }) 但这条线没有 .get(this.env.API_URL + path, { headers: this.headers, params: params }) 并且如果我直接在 http 调用之前 console.log(path) 它在控制台中显示它是正确的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-12
    • 2011-10-04
    • 2014-08-30
    • 2021-02-26
    • 2011-02-02
    • 2016-07-20
    相关资源
    最近更新 更多