角度响应头值

时间:2018-03-01 23:57:48

标签: angular wordpress-rest-api

我收到了来自Angular的WP Rest Api的请求

service.ts

get(): Observable<any>{
return  this.http.get<any>('mysite.com/posts?categories=4&per_page=2'));
}

应用-component.ts

  ngOnInit() {
this.RestApi.get()
  .subscribe(
    e => {
      console.log(e);
      console.log('headers: ' + e.headers);
    });}

响应

DevTools - Network 1https://i.stack.imgur.com/HBI7i.png

DevTools - 控制台:

(2) [{…}, {…}]
    0: {id: 100, date: "2018-02-27T18:38:59", ...}
    1: {id: 98, date: "2018-02-27T18:38:34", ...}
    length: 2__proto__: Array(0)

headers: undefined

那么,为什么在网络中我看到响应标题,但在控制台中我有未定义? 我怎样才能获得'X-WP-TotalPages'的价值?我做错了什么?

请注意! 我希望得到你的帮助:)。

2 个答案:

答案 0 :(得分:0)

http.get(...)根本不会返回具有headers属性的对象。

https://angular.io/api/common/http/HttpClient#get

如果您使用observe选项,则可以获得完整的响应:

this.http.get<Config>('mysite.com/posts?categories=4&per_page=2', { observe: 'response' });

https://angular.io/guide/http#reading-the-full-response

答案 1 :(得分:0)

您需要将{ observe: 'response' }选项传递到http.get方法,以便它可以返回类型为HttpResponse的Observable,而不仅仅是JSON数据。

要显示每个标题,您可以执行以下操作

this.RestApi.get()
  .subscribe(
    e => {
      console.log(e);
      // debugger; 
      this.headers = e.headers.keys().map(key =>
        console.log(`${key}: ${e.headers.get(key)}`));
    });
}

此外,您可以在代码中设置调试器(取消注释该行),以便浏览器在该行处断开,然后您可以根据需要检查这些值。