如何在打字稿中正确实现 http.get 周围的包装器？

Question

首先，我的Typescript知识很浅，所以我认为这是一个比较基础的问题。在我的 Web 应用程序的前端，有两个参数需要在 99% 的 http get 请求中提供。为了让我的生活更轻松一些，我决定围绕 HttpClient（来自“@angular/common/http”）编写一个简单的包装器，它为我提供这些参数。我需要传递给它的只是一个对象，然后它从中读取这两个参数并将它们添加到 get-request 的参数中。这是此代码当前的样子：

public get<T>(url: string, additionalObj?: AdditionalObject) {
  if (additionalObj == null) {
    return this.http.get<T>(url, {
      headers: {
        "Content-Type": "application/json",
      },
    });
  } else {
    const params: Record<string, string> = {};
    const param1: string | undefined = additionalObj?.param1;
    const param2: string | undefined = additionalObj?.param2;

    if (param1) {
      params["param1"] = param1;
    }
    if (param2) {
      params["param2"] = param2;
    }

    return this.http.get<T>(url, {
      headers: {
        "Content-Type": "application/json",
      },
      params,
    });
  }
}

虽然这在大多数情况下工作得很好，但我也有一些函数需要为 get-request 提供更多参数，所以我需要一些方法将提供给我函数的参数与两个参数合并我在函数内部提供，但我不知道该怎么做。我不想更改已经调用我的函数的函数中的任何内容，但我也想提供一种方法来在必要时指定其他参数。我该怎么做？

Answer 1

我认为您的实施对于您的需要而言可能过于复杂。如果您使用 Angular.

，我还会考虑使用 Http 拦截器

有一些令人困惑的事情，您总是提供 2 个参数，但是 if 语句的第一个分支 (additionalObj == null) 不会使用这些值？如果我们假设您在技术上追求三个分支

完全没有参数
两个参数
两个参数 + 额外

您可以通过以下方式实现。

使用辅助函数从给定对象中检索所有键并填充给定记录。这将节省 if (param1) 类型的场景。

GetParams(obj: any, params: Record<string, string>): Record<string, string>{
    for (const p of Object.keys(obj)){
      if(p){
        params[p] = obj[p];
      }
    }
    return params;
}

使用包装器，您可以这样修改它：

 public get<T>(url: string, additionalObj?: AdditionalObject) {
    if (additionalObj == null) {
      return this.http.get<T>(url, {
        headers: {
          "Content-Type": "application/json",
        },
      });
    } else {
      let params: Record<string, string> = GetParams(additionalObj, {});
    
      return this.http.get<T>(url, {
        headers: {
          "Content-Type": "application/json",
        },
        params,
      });
    }
  }

}

这将使您处于与之前相同的位置，但使用方式更简洁且可扩展

现在要添加额外的参数，您有两个选择，

修改现有的 AdditionalObject 属性。如果更改对象太多，您可以稍微更改函数的签名以确保类型安全。您需要做的就是将额外的参数添加到您的 additionalObj.

public get<T>(url: string, additionalObj?: Partial<AdditionalObject>)

您可以将另一个对象添加到函数调用中并获取这些属性。

public get<T>(url: string, additionalObj?: Partial<AdditionalObject>, evenMoreParams?: any) {
if (additionalObj == null) {
  return this.http.get<T>(url, {
    headers: {
      "Content-Type": "application/json",
    },
  });
} else {
  let params: Record<string, string> = GetParams(additionalObj, {});
  params = GetParams(evenMoreParams, params);

  return this.http.get<T>(url, {
    headers: {
      "Content-Type": "application/json",
    },
    params,
  });
}

}

如何在打字稿中正确实现 http.get 周围的包装器？

How to properly implement wrapper around http.get in typescript?

typescript

angular

angular-httpclient

angular12