javascript - How to return a string with Angular's http client? - Stack Overflow

admin管理员组

文章数量:1430464

I try to call a server which returns a csv as text. When I use Angular's HttpClient I want it to avoid trying to cast it to JSON. Setting the responseType to text in the httpOptions work, but it raises a TypeScript error which I ignore via @ts-ignore.

This is my code:

const httpOptions = {
  headers: new HttpHeaders({
    Accept: "text/plain",
    "Content-Type": "application/json",
  }),
  responseType: "text",
};

return this.httpClient.post<string>(
  `/api/csv`,
  {
    id: "1111",
    // more data
  },

  httpOptions
);

The error message is to big for me to see what the exact issue is. I got this solution somewhere here on SO, but I guess it is not up-to-date. But I am unable to see what the issue here is.

This is the error:

 Overload 1 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | unde
fined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): Observable<...>', gave the following error.
    Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext
| undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpCon
text | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
  Overload 2 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | un
defined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): Observable<...>', gave the following error.
    Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpContex
t | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpC
ontext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
  Overload 3 of 15, '(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; context?: HttpContext | undefined; observe?: "body" | undefined; params?: HttpParams | ... 1 mor
e ... | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; } | undefined): Observable<...>', gave the following error.
    Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; context?: HttpContext | undefined; observ
e?: "body" | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Types of property 'responseType' are inpatible.
        Type 'string' is not assignable to type '"json" | undefined'.

What am I missing?

I try to call a server which returns a csv as text. When I use Angular's HttpClient I want it to avoid trying to cast it to JSON. Setting the responseType to text in the httpOptions work, but it raises a TypeScript error which I ignore via @ts-ignore.

This is my code:

const httpOptions = {
  headers: new HttpHeaders({
    Accept: "text/plain",
    "Content-Type": "application/json",
  }),
  responseType: "text",
};

return this.httpClient.post<string>(
  `/api/csv`,
  {
    id: "1111",
    // more data
  },

  httpOptions
);

The error message is to big for me to see what the exact issue is. I got this solution somewhere here on SO, but I guess it is not up-to-date. But I am unable to see what the issue here is.

This is the error:

 Overload 1 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | unde
fined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): Observable<...>', gave the following error.
    Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext
| undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpCon
text | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
  Overload 2 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | un
defined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): Observable<...>', gave the following error.
    Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpContex
t | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Property 'observe' is missing in type '{ headers: HttpHeaders; responseType: string; }' but required in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "response"; context?: HttpC
ontext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
  Overload 3 of 15, '(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; context?: HttpContext | undefined; observe?: "body" | undefined; params?: HttpParams | ... 1 mor
e ... | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; } | undefined): Observable<...>', gave the following error.
    Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; context?: HttpContext | undefined; observ
e?: "body" | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.
      Types of property 'responseType' are inpatible.
        Type 'string' is not assignable to type '"json" | undefined'.

What am I missing?

• javascript
• angular
• typescript

Share Improve this question Follow asked Mar 4, 2022 at 10:54 ApolloApollo 1,84233 gold badges1616 silver badges3333 bronze badges 4

• 1 Where are the other 12 overloads? You have to choose one of the overloads and the call the method with the corresponding arguments. – jabaa Commented Mar 4, 2022 at 10:59
• Any particular reason you don't want to use JSON? If you're actually getting a JSON response, you should use it and eventually stringify it if you want to use it as a string. – Misha Mashina Commented Mar 4, 2022 at 11:01
• 1 @MishaMashina The server returns CSV, not JSON. AFAIK Angular HttpClient can't parse CSV. – jabaa Commented Mar 4, 2022 at 11:02
• @jabaa This is the message I get in the terminal. But now I know why. I cannot use the generic version of post. Instead I have to use http.get("/api/csv", {responseType: "text"). Thanks for your anwer. – Apollo Commented Mar 4, 2022 at 12:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Okay, I now found an answer.

Instead of this.httpClient.post<string>("/api/csv", {responseType: "text"}) I have to use this.httpClient.post("/api/csv", {responseType: "text"}). So without <string>.

本文标签： javascriptHow to return a string with Angular39s http clientStack Overflow