각도 6 : http 통화 중 응답 유형을 텍스트로 설정하는 방법

각도 6 : http 통화 중 응답 유형을 텍스트로 설정하는 방법

spring rest API에 http 요청을 하려고 합니다..API가 문자열 값("성공" 또는 "실패")을 반환합니다.하지만 API에 전화를 걸면서 응답 유형을 문자열 값으로 설정하는 방법을 모르겠습니다. 백엔드에서 코드 200을 반환했기 때문에 송구 오류가 발생했습니다. 본문: [object Object]

제 각 코드는 아래와 같습니다.

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-provider.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.');
  };

}

이러한 헤더를 사용해서는 안 되며, 헤더는 전송할 유형을 결정하며, 오브젝트(즉, JSON)를 전송하는 것입니다.

대신 옵션을 설정해야 합니다.responseType로.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));
}

오류 제거하기

'text' 형식은 'json' 형식에 할당할 수 없습니다.

Angular HTTP 가이드를 읽고 사용합니다.

대답유형: '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);

백엔드에 다음을 추가해야 합니다.

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

프론트엔드(서비스):

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

컴파일러 오류를 수정하려면 메서드 호출 후에 generic type 인수를 제거합니다.

responseType이 "text"일 때 항상 문자열을 반환해야 하기 때문에 Angular에서는 이 제네릭 형식 인수를 원하지 않습니다.

이 작업을

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

이것이 아님

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

post method signature에 generic type 인수가 포함되어 있지 않기 때문에 오류가 나타납니다.responseType: 'text.

아래의 다른 메소드 서명을 참조하십시오.

응답과 함께유형: 'json'(기본값)

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

응답과 함께유형: '텍스트'

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

generic type 인수는 type 'json'에 대해서만 존재합니다.오류를 수정하려면 제거합니다.

다음과 같이 사용합니다.

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'  });
}

저에겐 이런 방법이 통했습니다.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);
 }

의 기본 가정은HttpClient가'json'응답 유형.변경을 원하시는 경우'text', 이렇게 해야 합니다.

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

기본적으로 angular return responseType을 Json으로 입력하지만, 아래의 타입은 요구사항에 따라 구성할 수 있습니다.

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

예:

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

responseType을 설정하지 않고 그냥 reponse를 type casting 해보셨습니까?

이것이 제게 효과가 있었던 것입니다.

/**
 * 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;
  }
}

언급URL : https://stackoverflow.com/questions/50798592/angular-6-how-to-set-response-type-as-text-while-making-http-call