web-dev-qa-db-ja.com

Angular 2：HTTP応答本文にアクセスする方法

Angular 2に次のコードを記述しました。

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

応答を出力すると、コンソールに表示されます： enter image description here

レスポンスのbodyフィールドへのコードでアクセスしたいです。 「body」フィールドはアンダースコアで始まります。つまり、プライベートフィールドです。 「console.log（res._body）」に変更すると、エラーが発生しました。

ここで私を助けることができるゲッター関数を知っていますか？

javascriptajaxangularhttp
38
CrazySynthax

Request と Response extend Body の両方。内容を取得するには、text()メソッドを使用します。

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

このAPIはAngular 5で非推奨になりました。新しい HttpResponse<T> クラスには、代わりに.body()メソッドがあります。 {responseType: 'text'}では、Stringを返す必要があります。

56
OrangeDog

angular2を使用したレスポンスボディへのアクセス built- 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)})

  }
}
15
vishnu

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

.get()ではなく.request()に注意してください。

また、必要な場合や必要な場合に備えて、追加のextractDataおよびhandleErrorメソッドも提供したいと考えました。

10
SrAxi

応答データはJSON文字列形式です。アプリはresponse.json（）を呼び出して、その文字列をJavaScriptオブジェクトに解析する必要があります。

  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

6
Dmitrij Kuba

私も同じ問題を抱えていましたが、これはうまくいきました：

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);
  })
5
A. Bahieddine

_bodyオブジェクトを直接参照することはできませんか？この方法で使用した場合、エラーは返されないようです。

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

ワーキングプランカー

4
kind user

残念ながら、回答の多くは、応答の本文にアクセスする方法をtextとして単に示しています。デフォルトでは、応答オブジェクトの本文はテキストであり、ストリームを介して渡されるオブジェクトではありません。

探しているのは、ResponseオブジェクトのBodyオブジェクトプロパティのjson（）関数です。 MDNは、私よりもはるかに優れていると説明しています。

Body mixinのjson（）メソッドは、Responseストリームを受け取り、それを最後まで読み取ります。本文をJSONとして解析した結果で解決するプロミスを返します。

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

またはES6を使用：

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

ソース： https://developer.mozilla.org/en-US/docs/Web/API/Body/json

この関数はデフォルトでPromiseを返しますが、これはダウンストリームの消費のためにObservableに簡単に変換できることに注意してください（ストリームpunは意図していませんが、うまく機能します）。

Json（）関数を呼び出さないと、データは、特にResponseオブジェクトの_bodyプロパティにアクセスしようとしたときに、テキストとして返されます。プロパティを使用したり、単純に別のオブジェクトに変換することはできません）。

応答オブジェクトの例

4
pinky00106
.subscribe(data => {   
            console.log(data);
            let body:string = JSON.parse(data['_body']);`
3
RUPNESH SHARMA

これは私にとって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