augular之通讯HttpClient介绍

大多数前端应用都需要通过 HTTP 协议与后端服务器通讯.现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest 接口和 fetch() API。

1.安装本模块

HttpClientModule引入了应用模块中，我们就可以把HttpClient注入到组件和服务中去了

在app.module.ts中导入：（并在ngModule中import）

import {HttpClientModule} from '@angular/common/http';

2.发起一个请求来获取 JSON 数据

在应用发给服务器的请求中，最常见的就是获取一个JSON数据。（通常通过一个获取条目列表的API端点/api/items）获得如下格式的JSON对象：

{
  "results": [
    "Item 1",
    "Item 2",
  ]
}

get()方法

（1）依赖注入到组件里的构造函数里声明：

 constructor(private http: HttpClient) {}

（2）http请求：

ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('/api/items').subscribe(data => {
      // Read the result field from the JSON response.
      this.results = data['results'];
    });
  }

解析：响应体的类型检查

访问data['results']是用方括号语法来取得results字段的。

为了避免TS无法理解results到底是什么类型，

解决办法：

（1）提前声明响应体的类型:(定义一个接口)

interface ItemsResponse {
  results: string[];
}

（2）当我们发起HttpClient.get调用时，传入类型参数：

http.get('/api/items').subscribe(data => {
  // data is now an instance of type ItemsResponse, so you can do this:
  this.results = data.results;
});

读取完整的响应体

有时候服务器会返回一个特殊的响应头或状态码以标记出特定的条件，读取他们是必要的。

解决办法：observe（想要获取完整信息）而不只是只有响应体

http
  .get('/data.json', {observe: 'response'})
  .subscribe(resp => {

        console.log(resp.headers.get('X-Custom-Header'));//获取响应头或者状态码

    console.log(resp.body.someField);
  });

3.异常处理
（1）error：在subscribe里面加入error处理器。

（2）.retry()：重复请求

使用：

a.导入：

import 'rxjs/add/operator/retry';

b.把它用在 HTTP 的可观察对象上，比如这样：

http
  .get('/api/items')
  // Retry this request up to 3 times.
  .retry(3)
  // Any errors after the 3rd retry will fall through to the app.
  .subscribe(...);

请求非JSON数据

比如读取一个文本文件：

http
  .get('/textfile.txt', {responseType: 'text'})
  .subscribe(data => console.log(data));

4.把数据发送到服务器

get():从服务器中获取数据

post():修改型请求（把数据发送给服务器）

如：

const body = {name: 'Brad'};

http
  .post('/api/developers/add', body)
  .subscribe(...);

5.配置请求中的其他部分

除了 URL 和可能的请求体之外，要发送的请求中你可能还希望配置一些别的东西。所有这些都可以通过给这次请求传一个额外的options（选项）对象来解决。

头

最常见的就是往发出的请求中添加一个Authorization头，代码如下：

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

HttpHeaders类是不可变对象（immutable），所以每个set()都会返回一个新实例，并且应用上这些修改。

URL 参数：

http
  .post('/api/items/add', body, {
    params: new HttpParams().set('id', '3'),
  })
  .subscribe();

6.高级用法

（1）拦截所有的请求和响应

当应用程序发起一个请求时，拦截器可以在请求被发往服务器之前先转换这个请求。

并且在应用看到服务器发回来的响应之前，转换这个响应。这对于处理包括认证和记录日志在内的一系列工作都非常有用。