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>`, and for `'blob'` you get `Observable>`. — Octavian Mărculescu, Mar 30 '22 at 11:57
Does this answer your question? [Type "json" | undefined not satisfied by "json" in Angular HttpClient](https://stackoverflow.com/questions/62651724/type-json-undefined-not-satisfied-by-json-in-angular-httpclient) — jonrsharpe, Mar 30 '22 at 12:00

Chris Hamilton · Accepted Answer · 2022-03-31T12:50:02.133

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 '22 at 12:50

answered Mar 30 '22 at 19:04

Chris Hamilton

9,252
1
9
26

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? – user3345721 Mar 31 '22 at 12:14
If you want something more dynamic, you can always create an `HttpRequest` and pass it to `HttpClient.request()` instead. https://angular.io/api/common/http/HttpRequest you'll see that the `HttpRequest` constructor with a `"GET"` `method` parameter supports all four `responseType`s – Chris Hamilton Mar 31 '22 at 12:42
I've updated my answer to show `HttpClient.request()` – Chris Hamilton Mar 31 '22 at 12:50
using the HttpClient.request() was the best answer for me, Thank you! – user3345721 Apr 03 '22 at 08:32

Angular 2 http.get() with dynamic options parameter

1 Answers1