如何使用请求类将自定义字段附加到 HTTP 请求标头

Question

如何使用 Angular2 中的请求类将自定义字段附加到 HTTP 请求标头？ 我找到了解决类似问题的帖子，但它们不使用 Request 类。

我的代码如下。

let headers: Headers = new Headers();
headers.append('foo', 'bar');

let req: any = {
  method : RequestMethod.Get,
  url    : '/test.json',
  headers: headers,
};

// this.http is Http instance variable.
this.http.request(new Request(req)).map((res: any) => res.json());

这是非常简单的代码。 但是在执行此操作时，我无法使用 Google Chrome 的开发者工具在 HTTP 请求标头中找到自定义字段。

参考：https://angular.io/docs/js/latest/api/http/index/Request-class.html

---

可以重现此问题。 下面的代码应该得到 XHR 400 错误，但这不是问题。但请注意，请求标头没有自定义字段。

http://plnkr.co/edit/arCFx69V9H1Cl0pJXBzO?p=preview

Answer 1

您可能忘记导入 Headers 类：

import {Http, Headers, ...} from 'angular2/http';

您也可以使用以下代码：

let headers: Headers = new Headers();
headers.append('foo', 'bar');

this.http.get('test.json', { headers }).map((res: any) => res.json());

此外，不要忘记订阅返回的 observable 以执行请求，因为 observable 是惰性的：

let headers: Headers = new Headers();
headers.append('foo', 'bar');

this.http.get('test.json', { headers })
  .map((res: any) => res.json())
  .subscribe((data) => {
    console.log(data);
  });