Angular 2:如何访问HTTP响应正文?

时间:2017-04-13 13:52:21

标签: javascript ajax angular 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字段。 '身体'字段以下划线开头,这意味着它是一个私有字段。当我将其更改为' console.log(res._body)'我收到了一个错误。

你知道任何可以帮助我的吸气功能吗?

11 个答案:

答案 0 :(得分:55)

RequestResponse都延伸Body。 要获取内容,请使用text()方法。

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

在Angular 5中不推荐使用该API。新的HttpResponse<T>类改为使用.body()方法。 {responseType: 'text'}应该返回String

答案 1 :(得分:15)

以下是使用响应

中内置的angular2 访问响应正文的示例
func lights(affecting sprite: SKSpriteNode) -> [SKLightNode] {
    let lights = sprite.scene?.children.flatMap { (node) -> SKLightNode? in
        node as? SKLightNode
    } ?? []

    return lights.filter { (light) -> Bool in
        sprite.isLit(by: light)
    }
}

答案 2 :(得分:9)

以下是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); } http呼叫的示例:

.get()

注意.request()而不是extractData

我还希望为您提供额外的handleErrorAuthentication auth = SecurityContextHolder.getContext().getAuthentication(); 方法,以备不时之需。

答案 3 :(得分:5)

响应数据采用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

答案 4 :(得分:4)

你不能直接引用_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;
            });

Working plunker

答案 5 :(得分:4)

不幸的是,许多答案只是表明如何以文本的形式访问Response的正文。默认情况下,响应对象的主体是文本,而不是通过流传递的对象。

您正在寻找的是Response对象上Body对象属性的json()函数。 MDN解释它比我好得多:

Body mixin的 json()方法接受一个Response流并将其读取完成。它返回一个promise,解析为将正文解析为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以供下游使用(不要使用stream pun但效果很好)。

在不调用json()函数的情况下,数据(特别是在尝试访问Response对象的_body属性时)将作为文本返回,如果您正在寻找深层对象,这显然不是您想要的(如在具有属性的对象中,或者不能简单地转换为另一个对象)。

Example of response objects

答案 6 :(得分:4)

我也有同样的问题,这对我来说很有用:

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

答案 7 :(得分:3)

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

答案 8 :(得分:0)

您可以尝试使用 HttpResponse @angular/common/http。

tableView.register(UINib(nibName: "cell", bundle: nil), forCellReuseIdentifier: "cell")

不要忘记导入 subscribe((res: HttpResponse<any>) => { console.log(res.body) })

答案 9 :(得分:-1)

这对我来说是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();
});

答案 10 :(得分:-3)

这应该有效。如果是json响应,你可以使用response.json()获取body。

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