Angular2 http模块

1. Http简介

互联网是构建在网络通讯协议的基础上。所有的信息，不管是音频、视频、图片、声音还是文本，都是通过网络进行传输。网站开发过程不可避免的会接触位于应用层的http/https协议。这两种协议是构建与TCP/IP的基础之上。

RFC 2616 - IETF中定义的8中http请求方式为：GET、POST、HEAD、DELETE、PUT、TRACE、REQUEST、CONNECT.

2. Angular 模块http

angular2将http进行了封装，统一位于核心模块的http模块，使用时需要手动引入调用。
import Http from "@angular/http";

http协议标准规定的的http请求方法传入的参数包含三个部分:url(请求地址)、Request Header(请求头信息)、Request Body(请求体);Angular2在RFC2616的基础上封装了8种http请求.每种请求都会传入arguments参数即以上所说请求参数，其长度为2（或3）;请求方法的响应结果为Observable类型。

如 POST方法 其源代码为：
post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;

1. 先来看看请求使用方法：

1. post、put、patch三种方法都参数顺序不可调整，url、body是必须参数，options为可选参数；
2. get、delete、head、request、options这五种方法传递参数为1(或2)个，options为可选参数；

举几个例子：现在需要用cros跨域方式维护一个用户列表信息；
1. 需要请求用户信息列表；
2. 需要将修改后的用户信息发送至后台；

// user.service.ts
// 1. 请求用户列表
loadUserInfo(url:string):Observable<[]>{
    let  api=this.baseURL+url;
    let headers=this.makeHeaders();
    return this.http.get(
        api,{headers:headers}
        ).map(res=>res.json());
}
// 2. 提交用户信息
updateUserinfo(url：string,userInfo:Object):Observable<[]>{
    let  api=this.baseURL+url;
    let headers=this.makeHeaders();
    return this.http.post(
        api,userInfo,{headers:headers}
        ).map(res=>res.json());
}

如果上面post请求的body参数为空，即不需要传递请求体部分，不能省略，需传入一个空对象，如：
return this.http.post(api,{},{headers:headers}).map(res=>res.json());

若省略空请求体，http模块会将options部分当做请求体传递；

2. 再来看看每个请求参数：

angular封装的http请求模块部分，传入的参数url、body与其他http请求基本无差异；主要对请求头信息options进行了部分约定；

1. url: http请求发送的地址，类型为string；
2. body: http请求的请求主体信息，类型为任意类型any；
3. options: http请求的请求头信息，类型为RequestOptionsArgs；

关于options，继续看源代码：
主要包含以下8个属性：

export interface RequestOptionsArgs {
  url?: string|null;                                                // ①请求url
  method?: string|RequestMethod|null;                               // ②请求方法
  /** @deprecated from 4.0.0. Use params instead. */                       
  search?: string|URLSearchParams|{[key: string]: any | any[]}|null;// ③url查询字符串
  params?: string|URLSearchParams|{[key: string]: any | any[]}|null;// ④url查询字符串
  headers?: Headers|null;                                           // ⑤请求头信息
  body?: any;                                                       // ⑥请求体
  withCredentials?: boolean|null;                                   // ⑦跨域请求标志位
  responseType?: ResponseContentType|null;                          // ⑧请求响应的类型
}

这里主要说明一下⑤、⑦、⑧三个属性

• withCredentials:启用认证方式跨域请求标识位；
  指示了是否使用类似资格证书（cookies、authorization、headers/头部授权）的方式来创建一个跨域站点的访问控制请求，同一个站点下使用该属性无任何效果；angular封装的该属性默认值为true;

  XMLHttpRequest默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据。如果服务器接收带凭据的请求，会用Access-Control-Allow-Credentials: true的HTTP头部来响应。如果发送的是带凭证的请求，但服务器响应中没有包含这个头部信息，那么浏览器不会吧响应返回给Javascript进行处理（即：响应内容responseText中是空字符串，响应状态status=0，同时调用onerror()事件处理程序）；目前支持withCredentials属性的浏览器有FireFox3.5+、Safari4+、Chrome；IE10及更早版本均不支持。

• headers:请求头信息；用于对http请求的头信息进行操作；

  • 其主要包括一下10个方法：

  序号	方法名	作用	参数说明
  1	append(name,value)	添加指定字段头信息
  2	set(name,value)	添加、更新指定字段头信息
  3	delete(name)	删除指定字段头信息
  4	get(name)	获取指定字段头信息
  5	has(name)	判断是否包含指定字段头信息
  6	keys()	返回头信息的所有键值名
  7	values()	返回头信息的所有键值
  8	toJSON()	以字符串形式返回所有头信息
  9	getAll(name)	以数组形式返回指定字段的头信息
  10	forEach(fn(values,name,headers){})	…	…

• responseType :设置可接受的响应类型；即Request Headers.Accept值,默认接受所有类型；