Angular 2 http.get() with dynamic options parameter

Question

In an angular app that uses HttpClient service, The code below works fine:

this.http.get(myUrl, {responseType: 'json'})

I need to send the responseType as a dynamic parameter, something like:

this.http.get(myUrl, { responseType: (condition ? 'json' : 'blob') })

or like:

 let options = { responseType: 'json' };
 if (condition)
      options = { responseType: 'blob' };
 this.http.get(myUrl, options)

but typescript does not like it, and shows an error: No overload matches this call

What am I doing wrong and how can I achieve this?

Thanks!

Note: This Type "json" | undefined not satisfied by "json" in Angular HttpClient

does not meet my requirement, but helps me to correct the code:

const options: { responseType: "json" } = { responseType: "json" };
const optionsBlob: { responseType: "blob" } = { responseType: "blob" };

this.http.get(myUrl, condition ? options : optionsBlob)

yet, compiler is not satisfied, and shows the previous error.

What is the return type of your service method? What do you do with the observable further? There is a difference between the return types. When you use responseType: 'json' it returns Observable<HttpResponse<Object>>, and for 'blob' you get Observable<HttpResponse<Blob>>. — OctavianM
– OctavianM, Commented Mar 30, 2022 at 11:57
Does this answer your question? Type "json" | undefined not satisfied by "json" in Angular HttpClient — jonrsharpe
– jonrsharpe, Commented Mar 30, 2022 at 12:00

Chris Hamilton · Accepted Answer · 2022-03-31 12:50:02Z

1

HttpClient.get() has overloads based on the response type: https://angular.io/api/common/http/HttpClient. You can see that providing a different response type calls a different function. So this.http.get(myUrl, options); is ambiguous, the compiler does not know which function you are referring to. Instead, just call the correct overload as part of your condition.

    if (condition) this.http.get(myUrl, { responseType: 'blob' });
    else this.http.get(myUrl, { responseType: 'json' });

Alternative with HttpClient.request() instead.

    const responseType = condition ? 'json' : 'blob';
    const request = new HttpRequest('GET', myUrl, { responseType });
    this.http.request(request);

edited Mar 31, 2022 at 12:50

answered Mar 30, 2022 at 19:04

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3345721 Over a year ago

Thanks for your reply, Now I understand why the compiler complains, as you mentioned: 'the compiler does not know which function you are referring to'. but yet I did not get any nice solution how to implement the requirement. Your example seems fine, but if I need to support other types of the ResponseType (like text, arraybuffer etc) the code becomes clumsy (With many 'if's and code repeating), Is this the best practice way?

Chris Hamilton Over a year ago

If you want something more dynamic, you can always create an HttpRequest and pass it to HttpClient.request() instead. angular.io/api/common/http/HttpRequest you'll see that the HttpRequest constructor with a "GET" method parameter supports all four responseTypes

Chris Hamilton Over a year ago

I've updated my answer to show HttpClient.request()

user3345721 Over a year ago

using the HttpClient.request() was the best answer for me, Thank you!

Collectives™ on Stack Overflow

Angular 2 http.get() with dynamic options parameter

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related