查看HttpClient 官方文档

使用 HTTP 与后端服务进行通信

大多数前端应用都要通过 HTTP 协议与服务器通讯，才能下载或上传数据并访问其它后端服务。Angular 给应用提供了一个 HTTP 客户端 API，也就是 @angular/common/http 中的 HttpClient 服务类。

Most front-end applications need to communicate with a server over the HTTP protocol, to download or upload data and access other back-end services. Angular provides a client HTTP API for Angular applications, the HttpClient service class in @angular/common/http.

HTTP 客户端服务提供了以下主要功能。

• 请求类型化响应对象的能力。

• 简化的错误处理。

• 各种特性的可测试性。

• 请求和响应的拦截机制。

先决条件

在使用 HttpClientModule 之前，你应该对下列内容有基本的了解：

• TypeScript 编程

• HTTP 协议的用法

• Angular 的应用设计基础，就像Angular 基本概念中描述的那样

• Observable 相关技术和操作符。参阅可观察对象部分。

服务器通讯的准备工作

要想使用 HttpClient，就要先导入 Angular 的 HttpClientModule。大多数应用都会在根模块 AppModule 中导入它。

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

然后，你可以把 HttpClient 服务注入成一个应用类的依赖项，如下面的 ConfigService例子所示。

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

HttpClient 服务为所有工作都使用了可观察对象。你必须导入范例代码片段中出现的 RxJS 可观察对象和操作符。比如 ConfigService 中的这些导入就很典型。

content_copyimport { Observable, throwError } from 'rxjs';import { catchError, retry } from 'rxjs/operators';

从服务器请求数据

使用 HttpClient.get() 方法从服务器获取数据。该异步方法会发送一个 HTTP 请求，并返回一个 Observable，它会在收到响应时发出所请求到的数据。返回的类型取决于你调用时传入的 observe 和 responseType 参数。

get() 方法有两个参数。要获取的端点 URL，以及一个可以用来配置请求的选项对象。

content_copyoptions: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body' | 'events' | 'response',
    params?: HttpParams|{[param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>},
    reportProgress?: boolean,
    responseType?: 'arraybuffer'|'blob'|'json'|'text',
    withCredentials?: boolean,
  }

这些重要的选项包括 observe 和 responseType 属性。

• observe 选项用于指定要返回的响应内容。

• responseType 选项指定返回数据的格式。

应用经常会从服务器请求 JSON 数据。在 ConfigService 例子中，该应用需要服务器 config.json 上的一个配置文件来指定资源的 URL。

content_copy{
  "heroesUrl": "api/heroes",
  "textfile": "assets/textfile.txt",
  "date": "2020-01-29"}

要获取这类数据，get() 调用需要以下几个选项： {observe: 'body', responseType: 'json'}。这些是这些选项的默认值，所以下面的例子不会传递 options 对象。后面几节展示了一些额外的选项。

这个例子符合通过定义一个可复用的可注入服务来执行数据处理功能来创建可伸缩解决方案的最佳实践。除了提取数据外，该服务还可以对数据进行后处理，添加错误处理，并添加重试逻辑。

ConfigService 使用 HttpClient.get() 方法获取这个文件。

content_copyconfigUrl = 'assets/config.json';getConfig() {
  return this.http.get<Config>(this.configUrl);}

ConfigComponent 注入了 ConfigService 并调用了 getConfig 服务方法。

由于该服务方法返回了一个 Observable 配置数据，该组件会订阅该方法的返回值。订阅回调只会对后处理进行最少量的处理。它会把数据字段复制到组件的 config 对象中，该对象在组件模板中是数据绑定的，用于显示。

content_copyshowConfig() {
  this.configService.getConfig()
    .subscribe((data: Config) => this.config = {
        heroesUrl: data.heroesUrl,
        textfile:  data.textfile,
        date: data.date,
    });}