大多数前端应用程序须要通过 HTTP 协定与服务器通信，以下载或上传数据并拜访其余后端服务，SAP 电商云 Spartacus UI 也不例外。 Angular 为 Angular 应用程序提供了一个客户端 HTTP API，即开发包 @angular/common/http 中的 HttpClient 服务类。

HTTP 客户端服务提供以下次要性能。

  • 申请类型化响应对象(typed response objects)的能力
  • 简化的错误处理
  • 可测试性特色
  • 申请和响应拦挡

下图是 Spartacus OCC Adapter 实现中对 HTTPClient 的导入：

在应用 HttpClient 之前，须要导入 Angular HttpClientModule。 大多数应用程序都在根 AppModule 中执行此操作。

import { 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 {}

SAP Spartacus 的例子：

Requesting data from a server

应用 HttpClient.get() 办法从服务器获取数据。 异步办法发送一个 HTTP 申请，并在客户端真正收到服务器端返回的响应时，返回一个可能收回(emit)被申请数据(requested data)的 Observable。 返回类型因您传递给调用的察看和响应类型值而异。

get() 办法有两个参数； 要从中获取的端点 URL，以及用于配置申请的选项对象。

options 的参数定义：

options: {  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,}

下图是 Spartacus 通过 HTTPClient 获取 Language 列表的代码：

因为服务办法返回一个配置数据的 Observable，所以组件订阅了该办法的返回值。 订阅回调执行起码的后处理。 它将数据字段复制到组件的配置对象中，该对象在组件模板中进行数据绑定以进行显示。

代码如下：

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