大多數前端應用程式需要透過 HTTP 協議與伺服器通訊，以下載或上傳資料並訪問其他後端服務，SAP 電商雲 Spartacus UI 也不例外。 Angular 為 Angular 應用程式提供了一個客戶端 HTTP API，即開發包 @angular/common/http 中的 HttpClient 服務類。

HTTP 客戶端服務提供以下主要功能。

- 請求型別化響應物件(`typed response objects`)的能力
- 簡化的錯誤處理
- 可測試性特徵
- 請求和響應攔截

下圖是 Spartacus OCC Adapter 實現中對 HTTPClient 的匯入：
![](https://img-blog.csdnimg.cn/img_convert/a8c4d5532dce4404dcdbc946cce70b9d.png)

在使用 HttpClient 之前，需要匯入 Angular HttpClientModule。 大多數應用程式都在根 AppModule 中執行此操作。

```typescript
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 的例子：

![](https://img-blog.csdnimg.cn/img_convert/e78c08e9aa86f2872e9964eb6315dee6.png)

# Requesting data from a server

使用 HttpClient.get() 方法從伺服器獲取資料。 非同步方法傳送一個 HTTP 請求，並在客戶端真正收到伺服器端返回的響應時，返回一個能夠發出(emit)被請求資料(requested data)的 Observable。 返回型別因您傳遞給呼叫的觀察和響應型別值而異。

get() 方法有兩個引數； 要從中獲取的端點 URL，以及用於配置請求的選項物件。

options 的引數定義：

```typescript
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 列表的程式碼：

![](https://img-blog.csdnimg.cn/img_convert/68a746130526362ea51150dce463dfb8.png)

因為服務方法返回一個配置資料的 Observable，所以元件訂閱了該方法的返回值。 訂閱回撥執行最少的後處理。 它將資料欄位複製到元件的配置物件中，該物件在元件模板中進行資料繫結以進行顯示。

程式碼如下：

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

Angular HTTPClient API 在 SAP 電商雲中的使用

相關文章