Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用

简介: Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用

通过拦截,开发人员可以声明拦截器来检查和转换从应用程序到服务器的 HTTP 请求。 相同的拦截器还可以在返回应用程序的途中检查和转换服务器的响应。


多个拦截器共同形成请求/响应处理程序的前向和后向链。


拦截器可以以常规、标准的方式为每个 HTTP 请求/响应执行各种隐式任务,包括但不限于身份验证到日志记录。


如果没有拦截器的概念,开发人员将不得不为每个 HttpClient 方法调用显式地实现这些任务。


要实现拦截器,开发人员必须声明一个实现 HttpInterceptor 接口的 intercept() 方法的类。


下面是一个拦截器的实现,虽然拦截了 HTTP 请求之后,并未执行任何逻辑,只是简单的把请求传递给后向链:


import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}


intercept 方法将请求转换为最终返回 HTTP 响应的 Observable。


大多数拦截器在进入的过程中检查请求,并将可能更改的请求转发到实现 HttpHandler 接口的下一个对象的 handle() 方法。


与 intercept() 一样,handle() 方法将 HTTP 请求转换为 HttpEvents 的 Observable,最终包含服务器的响应。 intercept() 方法可以检查该 observable 并在将其返回给调用者之前对其进行更改,比如添加日志记录,字段过滤等等逻辑。


看个具体的例子:




上图是 SAP Spartacus UI SiteContextInterceptor 的实现,关键点如上图图例1和2所示:


使用 request.url.includes(this.occEndpoints.getBaseUrl() 判断当前请求 url 是否包含 baseUrl 片段。


如果包含,使用 request.clone, 给当前 HTTP 请求,添加 language 和 curr 参数。



这两个自动添加的参数,效果如下:



url:http://aaa/occ/v2/electronics-spa/currencies?lang=en&curr=USD


next 对象代表拦截器链中的下一个拦截器。链中的最后一个是 HttpClient 后端处理程序,它将请求发送到服务器并接收服务器的响应。


大多数拦截器调用 next.handle() 以便请求流向下一个拦截器,最终流向后端处理程序。 拦截器可以跳过调用 next.handle(),使链短路,并返回自己的 Observable 和人工服务器响应。


这是 Express.js 等框架中常见的中间件模式。



相关文章
|
2月前
|
安全 Android开发
Android之OKHttp基本使用和OKHttp发送https请求安全认证
Android之OKHttp基本使用和OKHttp发送https请求安全认证
68 0
|
5天前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
13 2
|
7天前
|
XML 开发框架 前端开发
http请求响应的contentType
http请求响应的contentType
21 5
|
9天前
|
缓存
HTTP响应首部字段释义
【6月更文挑战第23天】响应首部字段是由服务器端向客户端返回响应报文中所使用的字段。
|
20天前
|
Web App开发 存储 网络安全
Charles抓包神器的使用,完美解决抓取HTTPS请求unknown问题
本文介绍了在 Mac 上使用的 HTTP 和 HTTPS 抓包工具 Charles 的配置方法。首先,强调了安装证书对于抓取 HTTPS 请求的重要性,涉及 PC 和手机端。在 PC 端,需通过 Charles 软件安装证书,然后在钥匙串访问中设置为始终信任。对于 iOS 设备,需设置 HTTP 代理,通过电脑上的 IP 和端口访问特定网址下载并安装证书,同时在设置中信任该证书。配置 Charles 包括设置代理端口和启用 SSL 代理。完成这些步骤后,即可开始抓包。文章还提及 Android 7.0 以上版本可能存在不信任用户添加 CA 证书的问题,但未提供解决办法。
70 0
Charles抓包神器的使用,完美解决抓取HTTPS请求unknown问题
|
28天前
|
网络协议 前端开发 Java
网络原理 - HTTP / HTTPS(4)——构造http请求
网络原理 - HTTP / HTTPS(4)——构造http请求
17 1
|
28天前
|
存储 JSON 安全
网络原理 - HTTP / HTTPS(2)——http请求
网络原理 - HTTP / HTTPS(2)——http请求
22 1
|
11天前
|
XML JSON 前端开发
HTTP 请求参数与响应参数的关键区别
在 Web 的开发领域,无论你是前端开发还是后端开发人员,把握请求与响应参数的核心差异是极其重要的。这些参数在客户端和服务器之间的互动中扮演着关键角色。
|
2月前
|
存储 缓存
ETag的值是如何在HTTP响应中传递给客户端的
ETag的值是如何在HTTP响应中传递给客户端的
|
2月前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。

热门文章

最新文章