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. 先来看看请求使用方法：
- post、put、patch三种方法都参数顺序不可调整，url、body是必须参数，options为可选参数；
- 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进行了部分约定；
- url: http请求发送的地址，类型为string；
- body: http请求的请求主体信息，类型为任意类型any；
- 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请求的头信息进行操作；
| 序号 |
方法名 |
作用 |
参数说明 |
| 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值,默认接受所有类型；
