Angular HTTPClient API 在 SAP 电商云中的使用
2023-06-13 09:13:55 时间
大多数前端应用程序需要通过 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,
});
}
相关文章
- SAP UI5 sap.ui.layout.Grid 控件概述
- SAP UI5 应用中的 sap.ui.require.toUrl 使用场景
- SAP UI5 sap.ui.base.ManagedObject 的构造函数参数讲解
- SAP UI5 sap.ui.Device.media 的使用介绍
- windows 环境下使用 Node.js 访问 SAP OData 遇到 unable to get local issuer certificate
- 关于 SAP Spartacus Angular HTTP Interceptor 的拦截顺序
- SAP ABAP 报表屏幕输入字段如何实现联动效果试读版
- ERP最新动态:SAP ERP用户在制作Winshuttle脚本的过程中一些常用技巧
- SAP UI5 sap.m.Table 实现响应式布局的两种配置模式
- SAP Fiori Launchpad url 参数 sap-app-origin-hint 的含义
- Oracle购买SAP: 开启新数据时代(oracle收购sap)
- SAP 中的用户类型详解编程语言
- 如何给指定用户发送SAP系统消息-TH_POPUP详解编程语言
- SAP SEND FTP详解编程语言
- SAP ABAP常见错误记录之一:In RFC modules, only parameters with pass by value are allowed (参考参数在更新任务中不允许)详解编程语言
- SAP FTP FOR ABAP programing详解编程语言
- SAP-MM-移动类型解析之收货03–退货详解编程语言
- SAP工序外协与库存外协区别及工序外协操作手册详解编程语言
- sap可配置BOM的主要流程详解编程语言
- SAP 屏幕逻辑流详解编程语言
- sap JCO3.0安装缺少Microsoft Visual C++ 2005 Service Pack 1 Redistributable Package (KB973544)详解编程语言
- 调用SAP接口:MSSQL实现自动化(mssql调用sap接口)
- 数据库解决方案如何使用SAP创建Redis数据库(sap怎么创建redis)
- Oracle和SAP技术比较优势和劣势(oracle与sap比照)
- Oracle与SAP的技术潜力比较(oracle sap比较)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)