http - 如何使用请求类将自定义字段附加到 HTTP 请求 header

Question

如何使用 Angular2 中的请求类将自定义字段附加到 HTTP 请求 header ？我找到了解决类似问题的帖子，但它们没有使用 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 请求 header 中找到自定义字段。

引用:https://angular.io/docs/js/latest/api/http/index/Request-class.html

---

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

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

此外，不要忘记订阅返回的可观察对象以执行请求，因为可观察对象是惰性的:

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