web-dev-qa-db-ger.com

Winkel 6: Festlegen des Antworttyps als Text während eines HTTP-Anrufs

Ich versuche, eine HTTP-Anforderung an die Springrest-API zu richten. API gibt einen Zeichenfolgewert zurück ("success" oder "fail") ... aber ich weiß nicht, wie ich den Antworttyp als Zeichenfolgewert setzen soll, während ich die API aufrufe. . sein Fehler, da Backend Code 200 zurückgegeben hat, body: [object Object]

Mein Winkelcode ist wie folgt:

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

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

}

Jede Hilfe wäre dankbar ... danke im Voraus ..

javascriptangulartypescript
7
rahul shalgar

Sie sollten diese Header nicht verwenden. Die Header bestimmen, welche Art von Typ Sie senden, und Sie senden eindeutig ein Objekt (JSON).

Stattdessen sollten Sie die Option responseType auf text setzen:

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));
}
17
PierreDuc

Fehler beheben:

Der Typ "" Text "" kann nicht dem Typ "" Json "" zugeordnet werden.

Benutzen

responseType: 'text' als 'json'

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

Haben Sie versucht, den responseType nicht festzulegen und nur das Casting der Antwort einzugeben?

Das hat bei mir funktioniert:

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

Auf Ihrem backEnd sollten Sie hinzufügen:

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

An Ihrer Front (Service):

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