前端应用都需要通过 HTTP 协议与后端处事器通讯，@angular/common/http 中的 HttpClient 类为 Angular 应用措施供给的 API 来实现 HTTP 客户端成果。它基于浏览器供给的 XMLHttpRequest 接口。 HttpClient 带来的其它长处包孕：可测试性、强类型的请求和响应东西、倡议请求与接收响应时的拦截器撑持，以及更好的、基于可不雅察看（Observable）东西的 API 以及流式错误措置惩罚惩罚机制。

在根模块AppModule导入HttpClientModule。因为大大都应用中，多处多都要使用到http处事，所以直接导入到根模块去。

import { NgModule } from ‘@angular/core‘; import { BrowserModule } from ‘@angular/platform-browser‘; import { HttpClientModule } from ‘@angular/common/http‘; @NgModule({ imports: [ BrowserModule, HttpClientModule, ], declarations: [ AppComponent, ], bootstrap: [ AppComponent ] }) export class AppModule {}

然后就可以在处事中使用http处事了

import { Injectable } from ‘@angular/core‘; import { HttpClient } from ‘@angular/common/http‘; @Injectable() export class UserService { constructor(private http: HttpClient) { }

getUsers():Observable<Array<userInfo>>{
return this.http.get<Array<userInfo>>(url);
} }

2.封装httpService

   凡是一个应用我们不会直接使用HttpClient，数据的访谒没有这么简单，我们可能会对header 有统一的添加，错误措置惩罚惩罚，数据措置惩罚惩罚，网络异常等情况措置惩罚惩罚。如果不封装一个处事那么我们直接使用HttpClient，会呈现大量的反复，冗余杂乱的代码，无法统一标准化，在恒久的开发以及测试中会变得麻烦和增加维护本钱。这就是为什么在一个应用措施中，无论项目多小，我们都要把数据访谒封装一个单独的处事中去的原因。

这个是HttpClient.post 要领，我们可以看到他的返回类型是某个值的 RxJS Observable。

默认情况下把响应体当做无类型的 JSON 东西进行返回，如果指定了模版类型Array<userInfo>，他就会返回一个此类型的东西回来，但是具体还是得取决于数据接口返回来的数据。

参考上面的UserService处事里的getUsers。下面是某个组件挪用。

users: Array<User>; showUser() { this.userService.getUsers() .subscribe((data:Array<User>) => this.users = { ...data }); }

返回数据功效统一措置惩罚惩罚

凡是我们API返回来的数据布局是统一的规范化功效，有利于项目前后端疏散，团队合作开发。

export class ResultData<T> { success: boolean; msg?: string; data?: T; errorcode?: string; timestamp?: number; }

例子不才面??

错误措置惩罚惩罚

当你倡议一个网络请求，你不知道处事器会给你返回什么，你不知道请求是否能达随处事器，会不会呈现网络堵塞，处事器错误等等等的问题，这时候就需要要捕获错误，并对错误进行措置惩罚惩罚。使用 RxJS 的 catchError() 操纵符来成立对 Observable 功效的措置惩罚惩罚管道（pipe）

//post 请求
public post(url: string, data = {}): Observable<any> { return this.http.post(url, data, httpOptions).pipe( map(this.extractData), catchError(this.handleError)//获取了由 HttpClient 要领返回的 Observable，并把它们通过管道传给错误措置惩罚惩罚器 ); }
// 返回功效 private extractData(res: Response) { return res as ResultData<any>; }
// 错误动静类 private handleError(error: HttpErrorResponse) { if (error.error instanceof ErrorEvent) { console.error(‘An error occurred:‘, error.error.message); } else { console.error( `Backend returned code ${error.status}, ` + `body was: ${error.error}` ); } return throwError(‘Something bad happened; please try again later.‘); }

retry()