Angular 响应 headers 值

Question

我在 Angular

收到来自 WP Rest Api 的请求

service.ts

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

app-component.ts

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

回应

DevTools - Network 1: https://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

那么，为什么在网络中我看到响应 Headers，但在控制台中却没有定义？如何获得 'X-WP-TotalPages' 的值？我做错了什么？

谢谢关注！希望得到你的帮助:)

Answer 1

http.get(...) 根本 return 一个带有 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

Answer 2

你需要将 { observe: 'response' } 选项传递给你的 http.get 方法，这样它就可以 return 一个类型为 HttpResponse 的 Observable 而不仅仅是 JSON 数据。

要显示每个 headers，您可以这样做

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

您也可以在代码中设置调试器（取消注释该行），以便浏览器会在该行处中断，然后您可以根据需要检查值。

Angular 响应 headers 值

Angular response headers value

wordpress-rest-api

angular