What is the correct way to wrap an http.get in TypeScript?

Question

What is the correct way to wrap an http.get in TypeScript?

My understanding of Typescript is limited, so I have a basic question related to my web application's frontend. In most http get-requests, I need to include two parameters. To simplify this process, I created a simple wrapper for HttpClient (from "angular/common/http") that automatically adds these parameters based on an object passed to it. Here is the current code snippet:

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,
    });
  }
}

Although this function works well in most cases, I also need to pass additional parameters in certain scenarios. However, I am unsure how to merge these additional parameters with the existing ones without modifying the functions that call my function. How can I achieve this without impacting the existing code?

angular typescript angular-httpclient angular12

Answer 1

Answer №1

It seems like your approach may be a bit complex for your current requirements. Have you considered utilizing Http Interceptors in Angular?

One point of confusion is that you always pass 2 parameters, but the initial condition (additionalObj == null) does not make use of these values. To address this, let's consider three scenarios:

No Parameters provided
Two Parameters supplied
Two Parameters + Extra added

You can streamline this by creating a helper function to extract keys from an object and populate a record, reducing the need for multiple if checks.

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;
}

Now, tweak your wrapper method as follows:

 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,
      });
    }
  }

}

This adjustment maintains functionality while enhancing cleanliness and scalability.

To include extra parameters, you have two choices:

Update the existing properties of AdditionalObject. If modifying the object significantly is impractical, slightly revise the function signature for type safety by including additional parameters in additionalObj.

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

Add another object to the function call to handle these properties.

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,
  });
}

}

Answer 2

It seems like your approach may be a bit complex for your current requirements. Have you considered utilizing Http Interceptors in Angular?

One point of confusion is that you always pass 2 parameters, but the initial condition (additionalObj == null) does not make use of these values. To address this, let's consider three scenarios:

No Parameters provided
Two Parameters supplied
Two Parameters + Extra added

You can streamline this by creating a helper function to extract keys from an object and populate a record, reducing the need for multiple if checks.

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;
}

Now, tweak your wrapper method as follows:

 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,
      });
    }
  }

}

This adjustment maintains functionality while enhancing cleanliness and scalability.

To include extra parameters, you have two choices:

Update the existing properties of AdditionalObject. If modifying the object significantly is impractical, slightly revise the function signature for type safety by including additional parameters in additionalObj.

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

Add another object to the function call to handle these properties.

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,
  });
}

}

What is the correct way to wrap an http.get in TypeScript?

Answer №1

Similar questions

Is it possible to send requests to multiple APIs using a TypeScript event handler?

Having trouble with customizing a selected ListItemButton in Material-UI - need some help with

How to enable Autocomplete popper to expand beyond the menu boundaries in Material UI

Error Encountered During Angular 2 Protractor End-to-End Testing Runtime

Divide the string into several segments according to its position value

Is it possible to enforce strict typing for a property within an object that is declared as type 'any'?

What are some tips for integrating AppInsights with Angular?

Is there an array containing unique DateTime strings?

Can a mapped union type be created in TypeScript?

Whenever I attempt to make changes to the React state, it always ends up getting reset

Ways to remove newly added tasks using JavaScript function?

Performing operations on information within a map function

What is the process for selectively adding interceptors to app.module?

Refresh Form (Reactive Forms)

Exploring the world of Angular CLI testing and the versatility of

Tips for accessing a specific value within an array of objects using a key

What is the best way to retrieve the value of the selected mat-option?

Is there a method to indicate not using the watch feature through the command line in TSC?

Navigating through template files in Angular 2 components

Best practices for transferring objects between components while navigating routes in Angular