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

Tips on performing a join in an AngularFire2 database

Angular TSLint: Proceed to the following stage despite any encountered errors

Notify programmers about the potential risks associated with utilizing certain third-party components

Steps to disable TypeScript error messages for unused variables

Building dynamic input forms within Angular2

Encountering issues with compiling files in react app using webpack, failing to compile as anticipated

Need to Resend SMS Verification in Angular4 Firebase Phone Authentication? Here's How!

How can we incorporate methods using TypeScript?

Issue: The data type 'void' cannot be assigned to the data type 'ReactNode'

Preserve the checkbox state upon refreshing the page

What is the best way to ensure that the first tab is always pre-selected among dynamic tabs?

Create a compilation of categories/interfaces based on a mapping

The Typescript decorator is unable to access the property type within its own scope

Verification of unique custom string

Struggling to compile your Angular 2 application in Visual Studio 2015?

Receive characteristics in component specification

LightWeightChart: How do I incorporate a chart that resembles this style?

execute the node application using the .desktop file

The Angular 2 error message states that the type 'Observable<{}>' is not compatible with the assigned type

Using React to iterate through the child components of the parent