web-dev-qa-db-fra.com

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

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

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

Quand j’imprime la réponse, je me retrouve dans la console:  enter image description here

Je veux avoir accès dans le code au champ body de la réponse. Le champ "corps" commence par un trait de soulignement, ce qui signifie qu'il s'agit d'un champ privé. Quand je le change en 'console.log (res._body)', une erreur se produit. 

Connaissez-vous une fonction de lecture qui puisse m'aider ici? 

javascriptajaxangularhttp
35
CrazySynthax

Les deux Request et Response extend Body ..__ Pour obtenir le contenu, utilisez la méthode text().

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

Voici un exemple pour accéder au corps de réponse en utilisant angular2 built in Response  

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

  }
}
13
vishnu

Voici un exemple d'appel get 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);
}

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

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

9
SrAxi

Les données de 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

5
Dmitrij Kuba

Ne pouvez-vous pas simplement vous référer à l'objet _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;
            });

Plunker de travail

4
kind user

Malheureusement, beaucoup de réponses indiquent simplement comment accéder au corps de la réponse sous la forme text. Par défaut, le corps de l'objet de réponse est du texte et non un objet tel qu'il est transmis via un flux.

Ce que vous recherchez est la fonction json () de la propriété de l'objet Body sur l'objet Response. MDN l'explique beaucoup mieux que moi:

La méthode json () du mixage Body prend un flux de réponse et le lit jusqu'à son achèvement. Il retourne une promesse résolue avec le résultat de l'analyse du corps du texte au format JSON.

response.json().then(function(data) { console.log(data);});

ou en utilisant ES6:

response.json().then((data) => { console.log(data) });

Source: https://developer.mozilla.org/en-US/docs/Web/API/Body/json

Cette fonction retourne une promesse par défaut, mais notez que celle-ci peut facilement être convertie en observable pour une consommation en aval (le punk de flux n'est pas prévu mais fonctionne bien). 

Sans invoquer la fonction json (), les données, en particulier lors d’une tentative d’accès à la propriété _body de l’objet Response, seront renvoyées sous forme de texte. avec des propriétés, ou que ne peut pas être simplement converti en un autre objecté). 

Exemple d'objets de réponse

4
pinky00106

J'ai eu le même problème aussi et cela a fonctionné pour moi essayer:

this.http.request('http://thecatapi.com/api/images/get?format=html&results_per_page=10').
  subscribe((res) => {
    let resSTR = JSON.stringify(res);
    let resJSON = JSON.parse(resStr);
    console.log(resJSON._body);
  })
3
A. Bahieddine
.subscribe(data => {   
            console.log(data);
            let body:string = JSON.parse(data['_body']);`
2
RUPNESH SHARMA

C'est un travail pour moi à 100%: 

let data:Observable<any> = this.http.post(url, postData);
  data.subscribe((data) => {

  let d = data.json();
  console.log(d);
  console.log("result = " + d.result);
  console.log("url = " + d.image_url);      
  loader.dismiss();
});
0
Nheom Phearum