Angel4.3使用HttpClient库为us提供了一种处理Http请求的更简单的新方法。它以新的名称可用，以避免对当前http库造成破坏性更改。HttpClient 还为我们提供了监听进度事件和拦截器等高级功能，以监控或修改请求或响应。

<$>[注意]确保您使用的是角度4.3或更高版本来试用HttpClient<$>

安装

首先，您需要在您的应用程序模块中从@Angel/Common/http导入HttpClientModule：

1[label app.module.ts]
2import { BrowserModule } from '@angular/platform-browser';
3import { NgModule } from '@angular/core';
4import { HttpClientModule } from '@angular/common/http';
5
6import { AppComponent } from './app.component';

然后，您可以像往常一样使用HttpClient：

1[label some.service.ts]
2import { Injectable } from '@angular/core';
3
4import { HttpClient } from '@angular/common/http';
5@Injectable()
6export class DataService {
7  constructor(private http: HttpClient) {}

基本使用方法

发出基本的GET、POST、PUT、PATCH或DELETE请求与您习惯使用旧的http API非常相似。一个主要区别是，默认情况下需要JSON响应，因此不再需要显式解析JSON响应。

下面是一个GET请求示例：

1// ...
2
3constructor(private http: HttpClient) {}
4
5getData() {
6  this.http.get(this.url).subscribe(res => {
7    this.posts = res;
8  });
9}

如果你期望JSON以外的东西作为响应，你可以使用一个带有responseType键的对象来指定期望的响应类型：

1getData() {
2  this.http.get(this.url, { responseType: 'text' }).subscribe(res => {
3    this.data = res;
4  });
5}

您还可以为响应的形状定义一个接口，并根据该接口进行类型检查：

 1interface Post {
 2  title: string;
 3  body: string;
 4};
 5
 6// ...
 7
 8constructor(private http: HttpClient) {}
 9
10getData() {
11  this.http.get<Post>(this.url).subscribe(res => {
12    this.postTitle = res.title;
13  });
14}

默认情况下，HttpClient 返回响应的正文。您可以传入一个对象，并将观察键的值设置为‘Response’，以获得完整的响应。这对于检查某些标头非常有用：

1getData() {
2  this.http.get<Post>(this.url, { observe: 'response' }).subscribe(res => {
3    this.powered = res.headers.get('X-Powered-By');
4    this.postTitle = res.body.title;
5  });
6}

POST、PUT、PATCH请求

发出POST、PUT或补丁请求同样简单：

1postData() {
2  this.http.post(this.url, this.payload).subscribe();
3}

请注意，我们仍然需要订阅才能发出请求。如果没有订阅呼叫，请求就会变得冷淡。显然，您可能希望处理任何响应或错误：

 1postData() {
 2  this.http.post(this.url, this.payload).subscribe(
 3    res => {
 4      console.log(res);
 5    },
 6    (err: HttpErrorResponse) => {
 7      console.log(err.error);
 8      console.log(err.name);
 9      console.log(err.message);
10      console.log(err.status);
11    }
12  );
13}

请求错误的类型为HttpErrorResponse，其中包含错误名称、错误消息和服务器状态等。

传入头或查询参数的选项也可以添加到POST，PUT或PATCH请求中，使用传入对象中的头或参数键作为第三个参数：

1updatePost() {
2  this.http
3    .put(this.url, this.payload, {
4      params: new HttpParams().set('id', '56784'),
5      headers: new HttpHeaders().set('Authorization', 'some-token')
6    })
7    .subscribe(...);
8}

注意这里使用的是HttpParams和HttpHeaders类。您还需要从@Angel/Common/http导入这些文件。

进度事件

HttpClient 的一个很棒的新功能是能够监听进度事件。可以对任何类型的请求执行此操作，并且在请求事件的生命周期中将提供不同的信息。下面是一个带有GET请求的完整示例：

 1import { Injectable } from '@angular/core';
 2import {
 3  HttpClient,
 4  HttpRequest,
 5  HttpEvent,
 6  HttpEventType
 7} from '@angular/common/http';
 8
 9@Injectable()
10export class DataService {
11  url = '/some/api';
12
13  constructor(private http: HttpClient) {}
14
15  getData() {
16    const req = new HttpRequest('GET', this.url, {
17      reportProgress: true
18    });
19
20    this.http.request(req).subscribe((event: HttpEvent<any>) => {
21      switch (event.type) {
22        case HttpEventType.Sent:
23          console.log('Request sent!');
24          break;
25        case HttpEventType.ResponseHeader:
26          console.log('Response header received!');
27          break;
28        case HttpEventType.DownloadProgress:
29          const kbLoaded = Math.round(event.loaded / 1024);
30          console.log(`Download in progress! ${ kbLoaded }Kb loaded`);
31          break;
32        case HttpEventType.Response:
33          console.log('😺 Done!', event.body);
34      }
35    });
36  }
37}

我们首先需要通过创建HttpRequest类的实例并使用reportProgress选项来构建请求对象。
然后，我们订阅请求对象以发起请求，并在请求的生命周期内侦听不同的事件类型。我们可以根据事件类型做出适当的反应。可用的事件类型包括Sent、ResponseProgress、ResponseHeader、DownloadProgress、Response和User。
在上面的例子中，我们从GET响应中获得了到目前为止下载的数据量，并且在类似POST或PUT请求的情况下，我们还可以通过使用类似'100 * event.loaded /event.total'的东西来获得上传的有效负载的百分比。这使得向用户显示进度条变得非常容易。

🤓这篇文章介绍了HttpClient的基础知识，接下来将讨论拦截器的使用，这是HttpClient的杀手级功能。您也可以前往官方文档)进行更深入的了解。

Angular 的 HttpClient 简介

安装

基本使用方法

POST、PUT、PATCH请求

进度事件