Angular HTTPClient API 在 SAP 电商云中的使用

简介: Angular HTTPClient API 在 SAP 电商云中的使用

大多数前端应用程序需要通过 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 的例子:


image.png


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 列表的代码:


image.png


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


代码如下:


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



相关文章
|
2月前
|
机器学习/深度学习 人工智能 达摩院
第一个Angular应用创建问题之在云开发平台上进行Angular应用的日常环境部署如何解决
第一个Angular应用创建问题之在云开发平台上进行Angular应用的日常环境部署如何解决
|
2月前
|
JavaScript 搜索推荐 API
Angular携手Angular Universal:全面实现服务器端渲染技术——从环境搭建到部署的详尽指南
【8月更文挑战第31天】在现代Web开发中,服务器端渲染(SSR)对于提升应用加载速度和SEO至关重要。Angular Universal作为Angular的SSR解决方案,允许在服务器上渲染应用,再发送至客户端,显著提高初始加载速度。本文将详细介绍如何使用Angular和Angular Universal实现SSR,并分享最佳实践。
35 0
|
2月前
|
缓存 前端开发 测试技术
Angular 与 Angular Universal 超厉害!实现服务器端渲染,开启高效开发与优质用户体验之旅!
【8月更文挑战第31天】在现代前端开发中,用户体验至关重要。Angular Universal 为 Angular 应用提供服务器端渲染(SSR)解决方案,显著提升性能和可访问性。本文介绍 SSR 的优势,包括更快的首屏加载时间、更好的 SEO 和更稳定的用户体验。接着详细讲解安装和配置 Angular Universal 的步骤,并提供优化 SSR 性能的方法,如延迟加载、缓存和预取技术。同时讨论了处理动态内容的策略,并介绍了测试和部署的最佳实践。通过遵循这些实践,可以确保应用高效稳定运行,提升用户体验。附带的示例代码展示了如何在服务器端和客户端处理数据。
23 0
|
4月前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
49 2
|
5月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
|
存储 缓存 JavaScript
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
|
资源调度 JavaScript 前端开发
一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
笔者是一位 Angular 开发工程师,之前尝试过国外一款著名的在线编辑器,StackBlitz. 这款编辑器功能强大,但因为服务器在国外,所以我平时访问的时候,由于网络的原因,在编辑代码和本地运行编译好的 Angular 应用时,经常感觉到延迟,影响了用户体验。
一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
|
前端开发 API
Angular HTTPClient API 在 SAP 电商云中的使用
Angular HTTPClient API 在 SAP 电商云中的使用
|
JSON 自然语言处理 编译器
在 Angular 框架上国际化方案
第一次在 Angular 框架上落地国际化方案,将 Eoapi 的经验分享给大家~
在 Angular 框架上国际化方案
|
前端开发 API
Angular 中使用 Api 代理
本文使用 angualr 来讲解代理 api 对接的话题。
Angular 中使用 Api 代理