property - Angular-res.json() no es una función

res json ionic

Question

Tengo un problema con mi servicio API. Este servicio se conecta a mi API de backend de nodejs.

El error dice

ERROR TypeError: res.json is not a function

Recibo este error después de actualizar recientemente este servicio para usar HTTPClient en lugar de Http. ¿Estoy recibiendo esta respuesta porque me falta el http antiguo con el nuevo? Si ese es el caso, ¿hay una nueva Respuesta y cómo la uso?

import { Injectable } from ''@angular/core'';
import { environment } from ''../../environments/environment'';
import { HttpHeaders, HttpClient, HttpParams } from ''@angular/common/http'';
import { Response } from ''@angular/http'';
import { Observable } from ''rxjs/Rx'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/catch'';

import { JwtService } from ''./jwt.service'';

@Injectable()
export class ApiService {
  constructor(
    private http: HttpClient,
    private jwtService: JwtService
  ) {}

  private setHeaders(): HttpHeaders {
    const headersConfig = {
      ''Content-Type'': ''application/json'',
      ''Accept'': ''application/json''
    };
    if (this.jwtService.getToken()) {
      headersConfig[''Authorization''] = this.jwtService.getToken();
    }
    return new HttpHeaders(headersConfig);
  }

  private formatErrors(error: any) {
     return Observable.throw(error.json());
  }

  get(path: string, httpParams: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`, { headers: this.setHeaders(), params: httpParams })
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  put(path: string, body: Object = {}): Observable<any> {
    return this.http.put(
      `${environment.api_url}${path}`,
      JSON.stringify(body),
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  post(path: string, body: Object = {}): Observable<any> {
    return this.http.post(
      `${environment.api_url}${path}`,
      body,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }

  delete(path): Observable<any> {
    return this.http.delete(
      `${environment.api_url}${path}`,
      { headers: this.setHeaders() }
    )
    .catch(this.formatErrors)
    .map((res: Response) => res.json());
  }
}

Answer 1

No es necesario usar este método:

 .map((res: Response) => res.json() );

Simplemente use este método simple en lugar del método anterior. con suerte obtendrás tu resultado:

.map(res => res );

Answer 2

Puede eliminar toda la línea a continuación:

 .map((res: Response) => res.json());

No es necesario utilizar el método de mapa en absoluto.

Answer 3

Tuve un problema similar en el que queríamos actualizar el módulo Http en desuso a HttpClient en Angular 7. Pero la aplicación es grande y necesita cambiar res.json () en muchos lugares. Así que hice esto para tener el nuevo módulo con soporte posterior.

return this.http.get(this.BASE_URL + url)
      .toPromise()
      .then(data=>{
        let res = {''results'': JSON.stringify(data),
        ''json'': ()=>{return data;}
      };
       return res; 
      })
      .catch(error => {
        return Promise.reject(error);
      });

Agregar una función con nombre "json" ficticia desde el lugar central para que todos los demás servicios puedan ejecutarse con éxito antes de actualizarlos para acomodar una nueva forma de manejo de respuesta, es decir, sin la función "json".

Answer 4

HttpClient.get() aplica res.json() automáticamente y devuelve Observable<HttpResponse<string>> . Ya no necesita llamar a esta función usted mismo.

¿Ve la diferencia entre HTTP y HTTPClient en angular 4?