Angular 2 : Comment accéder à un corps de réponse HTTP ?

Question

J'ai écrit le code suivant en Angular 2 :

this.http.request('http://thecatapi.com/api/images/get?format=html&results_per_page=10').
      subscribe((res: Response) => {
        console.log(res);
      })

Lorsque j'imprime la réponse que j'obtiens dans la console :

Je veux avoir accès dans le code au champ "body" de la réponse. Le champ 'body' commence par un trait de soulignement, ce qui signifie que c'est un champ privé. Lorsque je le change en 'console.log(res._body)', j'obtiens une erreur.

Connaissez-vous une fonction getter qui pourrait m'aider ici ?

Answer 1

Les deux sites Request y Response étendre Body . Pour obtenir le contenu, utilisez la commande text() méthode.

this.http.request('http://thecatapi.com/api/images/get?format=html&results_per_page=10')
    .subscribe(response => console.log(response.text()))

---

Cette API a été dépréciée dans Angular 5. La nouvelle HttpResponse<T> a plutôt un .body() méthode. Avec un {responseType: 'text'} qui devrait retourner un String .

Answer 2

Voici un exemple pour accéder au corps de la réponse en utilisant angular2 intégré Réponse

import { Injectable } from '@angular/core';
import {Http,Response} from '@angular/http';

@Injectable()
export class SampleService {
  constructor(private http:Http) { }

  getData(){

    this.http.get(url)
   .map((res:Response) => (
       res.json() //Convert response to JSON
       //OR
       res.text() //Convert response to a string
   ))
   .subscribe(data => {console.log(data)})

  }
}

Answer 3

Voici un exemple de get Appel http :

this.http
  .get('http://thecatapi.com/api/images/get?format=html&results_per_page=10')
  .map(this.extractData)
  .catch(this.handleError);

private extractData(res: Response) {
   let body = res.text();  // If response is a JSON use json()
   if (body) {
       return body.data || body;
    } else {
       return {};
    }
}

private handleError(error: any) {
   // In a real world app, we might use a remote logging infrastructure
   // We'd also dig deeper into the error to get a better message
   let errMsg = (error.message) ? error.message :
   error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
}

Note .get() au lieu de .request() .

Je voulais aussi vous fournir des informations supplémentaires extractData y handleError des méthodes au cas où vous en auriez besoin et que vous ne les ayez pas.

Answer 4

Les données de la réponse sont sous forme de chaîne JSON. L'application doit analyser cette chaîne en objets JavaScript en appelant response.json().

  this.http.request('http://thecatapi.com/api/images/get?format=html&results_per_page=10').
  .map(res => res.json())
  .subscribe(data => {
    console.log(data);
  })

https://angular.io/docs/ts/latest/guide/server-communication.html#!#extract-data

Answer 5

Ne pouvez-vous pas simplement vous référer à la _body directement ? Apparemment, il ne renvoie aucune erreur s'il est utilisé de cette façon.

this.http.get('https://thecatapi.com/api/images/get?format=html&results_per_page=10')
            .map(res => res)
            .subscribe(res => {
                this.data = res._body;
            });

Plongeur de travail