ChatGPT解决这个技术问题 Extra ChatGPT

Angular 6:如何在进行 http 调用时将响应类型设置为文本

I trying to make http request to the spring rest API.. API returns a string value ("success" or "fail")... but I dont know how to set the response type as string value while making call to the API..its throwing error as Backend returned code 200, body was: [object Object]

My angular code is like below,

order.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ProductSearch } from '../_models/product-search';
import { ProductView } from '../_models/product-view';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ErrorHandlerService } from './error-handler.service';
import { Category } from '../_models/category';


@Injectable({
  providedIn: 'root'
})
export class OrderService {

  constructor(private http: HttpClient, private errorHandlerService: ErrorHandlerService) { }

addToCart(productId: number, quantity: number): Observable<any> {
    const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
    console.log("--------order.service.ts----------addToCart()-------productId:"+productId+":------quantity:"+quantity);
     return this.http.post<any>('http://localhost:8080/order/addtocart', 
              { dealerId: 13, createdBy: "-1", productId: productId, quantity: quantity}, 
              {headers: headers})
              .pipe(catchError(this.errorHandlerService.handleError));
    }
}

error-handler.service.ts

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpResponse } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ErrorHandlerService {

  constructor() { }

  public handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  };

}

P
Poul Kruijt

You should not use those headers, the headers determine what kind of type you are sending, and you are clearly sending an object, which means, JSON.

Instead you should set the option responseType to text:

addToCart(productId: number, quantity: number): Observable<any> {
  const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');

  return this.http.post(
    'http://localhost:8080/order/addtocart', 
    { dealerId: 13, createdBy: "-1", productId, quantity }, 
    { headers, responseType: 'text'}
  ).pipe(catchError(this.errorHandlerService.handleError));
}

its getting compile error...[ts] Argument of type '{ responseType: "text"; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'responseType' are incompatible. Type '"text"' is not assignable to type '"json"'.
@rahulshalgar I've updated my answer. Change the <any> to <string>
@rahulshalgar what if you remove the generic type annotation? I see no reason why it should not work
sorry.. its was my mistake.. but I am now getting another error error-handler.service.ts:21 Backend returned code 415, body was: {"timestamp":"2018-06-11T13:45:32.875+0000","status":415,"error":"Unsupported Media Type","message":"Content type 'application/json' not supported","path":"/order/addtocart"}
@rahulshalgar apparently the backend you are connecting to does not like the type i made it sent. You should either change your backend to accept JSON requests (which will make your life so much easier, because you are sending objects). Or put the headers backs. (I'll update my answer for the latter)
d
devmiles.com

To get rid of error:

Type '"text"' is not assignable to type '"json"'.

Read the Angular HTTP guide and use

responseType: 'text' as const

import { HttpClient, HttpHeaders } from '@angular/common/http';
.....
 return this.http
        .post<string>(
            this.baseUrl + '/Tickets/getTicket',
            JSON.stringify(value),
        { headers, responseType: 'text' as const }
        )
        .map(res => {
            return res;
        })
        .catch(this.handleError);

I can not find what is doing here 'text' as 'json'. Could you add a name of that construction, or even better- explain that part?
Not sure what 'text' as 'json' does but it is not a clean solution as stated here: github.com/angular/angular/issues/18672#issuecomment-455435341
Actually, responseType only allows 'json' value. Typescript knows that. So writing 'text' as 'json' means "I give you 'text' value, but for type-checking, consider I gave you 'json'". So typescript won't complain. This only allows you to "lie" to typescript.
@Random There's no need to 'lie' typescript. If you think you have to do that, you're using it wrong. The accepted answer is correct.
@MichaelWestcott That's not the point of my comment, but you're right. I was just explaining what does 'text' as 'json' means, as asked by previous comments.
S
Saad Joudi

On your backEnd, you should add:

@RequestMapping(value="/blabla",  produces="text/plain" , method = RequestMethod.GET)

On the frontEnd (Service):

methodBlabla() 
{
  const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
  return this.http.get(this.url,{ headers, responseType: 'text'});
}

A
AbolfazlR

Use like below:

yourFunc(input: any):Observable<string> {
 var requestHeader = { headers: new HttpHeaders({ 'Content-Type': 'text/plain', 'No-Auth': 'False' })};
 const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
 return this.http.post<string>(this.yourBaseApi+ '/do-api', input, { headers, responseType: 'text' as 'json'  });
}

If you use the non-generic post method, you can remove the hacky type assertion.
Not working , has errors in headers and response type section
A
Amir

For me this way worked. Like requestOptions as object

 returnObservable(): Observable<any> {
    const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
    const requestOptions: Object = {
      headers: headers,
      responseType: 'text'
    }
    return this.http.get<any>(this.streamURL , requestOptions);
 }

T
Tal Jacob - Sir Jacques

The default assumption of the HttpClient is 'json' responseType. If you want to change it to 'text', you should do it like so:

  public signIn(dto: UserCredentialsDto): Promise<string> {
    return this.http.post<string>(
      `${this.url}/userCredentials/signIn`, dto, { responseType: 'text' as 'json'}).toPromise();
  }

This is without header in case the API return text response: this.http.post(URL,department,{ responseType: 'text' as 'json' }
P
Pradeep

By Default angular return responseType as Json, but we can configure below types according to your requirement.

responseType: 'arraybuffer'|'blob'|'json'|'text'

Ex:

this.http.post(
    'http://localhost:8080/order/addtocart', 
    { dealerId: 13, createdBy: "-1", productId, quantity }, 
    { headers, responseType: 'text'});

R
Ryan

To fix the compiler error, remove the generic type argument from the post method call.

DO THIS

return this.http.post('example', postBody, {
  responseType: 'text'
});

NOT THIS

return this.http.post<any>('example', postBody, {
  responseType: 'text'
});

The error appears because the post method signature does not contain a generic type argument when responseType: 'text.

See the different method signatures below:

With responseType: 'json' (the default)

post<T>(url: string, body: any | null, options?: {
    ...
    responseType?: 'json';
    ...
}): Observable<T>;

With responseType: 'text'

post(url: string, body: any | null, options: {
    ...
    responseType: 'text';
    ...
}): Observable<string>;

Notice the generic type argument only exists for type 'json'. Remove it to fix the error.


J
Jason Hu

Have you tried not setting the responseType and just type casting the response?

This is what worked for me:

/**
 * Client for consuming recordings HTTP API endpoint.
 */
@Injectable({
  providedIn: 'root'
})
export class DownloadUrlClientService {
  private _log = Log.create('DownloadUrlClientService');


  constructor(
    private _http: HttpClient,
  ) {}

  private async _getUrl(url: string): Promise<string> {
    const httpOptions = {headers: new HttpHeaders({'auth': 'false'})};
    // const httpOptions = {headers: new HttpHeaders({'auth': 'false'}), responseType: 'text'};
    const res = await (this._http.get(url, httpOptions) as Observable<string>).toPromise();
    // const res = await (this._http.get(url, httpOptions)).toPromise();
    return res;
  }
}

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅