正文
(1) 创建 XMLHttpRequest 对象
(2) 设置请求方式和请求 URL 地址
(3) 监听 readyState 状态变化
(4) 判断请求是否完成且请求成功
(5) 把响应体转换为 JSON 对象，并赋值给 members 属性
(6) 发送 HTTP 请求
虽然使用 XMLHttpRequest API 我们也实现了同样的功能，但使用 HttpModule 给我们带来的好处，一目了然。其实 HttpModule 底层实现也是基于 XMLHttpRequest API，只是它对 XMLHttpRequest API 进行了封装，抽象出了 Body、Request、Headers 和 Response 等对象。
HttpModule
请求与响应
HTTP 协议是基于请求与响应，通过 XMLHttpRequest API，我们可以方便的发送 HTTP 请求。相信很多读者已经用过了以下一款或多款 Fiddler、Paw (macOS)、Postman 、Advanced REST client HTTP 客户端，通过它们我们也可以方便的发送 HTTP 请求。其实不管是使用上面的那些 HTTP 客户端还是使用 XMLHttpRequest API，我们最终都是要构造 HTTP 请求报文，然后向服务器发送 HTTP 请求，接着我们就需要接收和解析服务器返回的 HTTP 响应报文，最后根据不同的响应类型解析响应体，进而进行页面渲染。
接下来我们来分析一下前面 Angular Orgs Members - Http 示例中的代码：
export class AppComponent implements OnInit {
members: Member[];
constructor(private http: Http) { }
ngOnInit() {
this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
.map(res => res.json())
.subscribe(data => {
if (data) this.members = data;
});
}
}
首先我们先来分析一下通过构造注入方式，注入的 Http 对象：
constructor(private http: Http) { }
如何创建 Http 对象
angular2/packages/http/src/http_module.ts
@NgModule({
providers: [
{provide: Http, useFactory: httpFactory, deps: [XHRBackend, RequestOptions]},
BrowserXhr,
{provide: RequestOptions, useClass: BaseRequestOptions},
{provide: ResponseOptions, useClass: BaseResponseOptions},
XHRBackend,
{provide: XSRFStrategy, useFactory: _createDefaultCookieXSRFStrategy},
],
})
export class HttpModule { }
httpFactory 工厂函数
export function httpFactory(
xhrBackend: XHRBackend,
requestOptions: RequestOptions): Http {
return new Http(xhrBackend, requestOptions); // 创建Http对象
}
Http 类构造函数
// angular2/packages/http/src/http.ts 片段
@Injectable()
export class Http {
constructor(protected _backend: ConnectionBackend,
protected _defaultOptions: RequestOptions) {}
}
创建 Http 对象
1.创建 XHRBackend 对象
2.创建 RequestOptions 对象
如何创建 XHRBackend 对象
angular2/packages/http/src/http_module.ts
@NgModule({
providers: [
...,
BrowserXhr, // 等价于 {provide: BrowserXhr, useClass: BrowserXhr}
{provide: ResponseOptions, useClass: BaseResponseOptions},
XHRBackend, // 等价于 {provide: XHRBackend, useClass: XHRBackend}
{provide: XSRFStrategy, useFactory: _createDefaultCookieXSRFStrategy},
],
})
export class HttpModule { }
XHRBackend 类
// angular2/packages/http/src/backends/xhr_backend.ts 片段
@Injectable()
export class XHRBackend implements ConnectionBackend {
constructor(
