Angular HTTPClient 发送请求的触发方式讨论

简介: Angular HTTPClient 发送请求的触发方式讨论

对于所有 HttpClient 方法,该方法不会开始其 HTTP 请求,直到开发人员在该方法返回的 observable 上调用 subscribe()。

这适用于所有 HttpClient 方法。


下图的 loadLanguages 是 SAP Spartacus 前端实现里获取语言列表的方法,里面第 28 行调用了 HTTPClient 输入的实例 http 的 get 方法。这个方法返回一个 Observable.


image.png


Angular 里直接调用 loadLanguages 是不会触发真正的 HTTP 请求的。这是因为,从 HttpClient 方法返回的所有 observables 在设计上都称之为 Code Observable 。 HTTP 请求的执行被延迟,让开发人员可以在实际发生 HTTP 请求发送之前,使用诸如 tap 和 catchError 之类的附加操作来扩展 observable。


只有调用 subscribe() ,才会触发 observable 的执行,并导致 HttpClient 编写 HTTP 请求并将其发送到服务器。


将这些 observables 视为实际 HTTP 请求的blueprints.


事实上,每个 subscribe() 都会启动一个单独的、独立的 observable 执行。 订阅两次会产生两个 HTTP 请求。


因此,我们如果在 SAP Spartacus 代码里,使用变量来存储代码27 行 loadLanguages 返回的 Observable,并且订阅两次这个变量,会触发两个发送往 SAP Commerce Cloud 后台的 HTTP 请求。


我们查看 SAP Spartacus 代码,SiteConnector 调用了 SiteAdapter 的该方法。再查看哪个方法调用了 SiteConnector 的 getLanguages 方法。可以使用 Visual Studio Code 的 Ctrl+Tab 快捷键来加速文件间的切换。


image.png


SAP Spartacus 使用了 NgRx 框架来进行 State management,LanguagesEffects 类的实现里,调用了 siteConnector 的 getLanguages.


image.png


这里代码第 26 行使用了 exhaustMap,这个 Operator 的效果和 switchMap 相反。


如果请求 A 已经发出但尚未被服务器端处理,那么请求 B 再发出,switchMap 会自动 cancel A 请求,发送 B 请求。


如果替换成 exhaustMap,则 B 请求会被忽略,而 A 请求则不受影响。


exhaustMap 适用于应对那些当点击了一个按钮之后发觉页面没有任何反映,于是倾向于重复点击同一按钮的用户。



相关文章
|
5月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
5月前
【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建
【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建
【请求后台接口】30秒完成Angular10精简版HttpClient请求服务搭建
|
12月前
|
数据采集 搜索推荐 索引
Angular 服务器端渲染应用返回 HTTP 404 和 200 状态码对 SEO 的影响
Angular 服务器端渲染应用返回 HTTP 404 和 200 状态码对 SEO 的影响
|
5月前
|
网络协议 JavaScript
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染应用里重用 TCP 连接的示例代码
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
|
11月前
|
数据采集 JavaScript 前端开发
Angular 服务器端渲染应用 re-hydration 过程详解
Angular 服务器端渲染应用 re-hydration 过程详解
Angular HTTP 请求自定义 timeout 值的一种实现思路
Angular HTTP 请求自定义 timeout 值的一种实现思路
|
存储 前端开发
Angular HTTPClient 发送请求的触发方式讨论
Angular HTTPClient 发送请求的触发方式讨论
|
JavaScript
在服务器端渲染完毕的 Angular Component,在客户端还会重新渲染一次吗?
在服务器端渲染完毕的 Angular Component,在客户端还会重新渲染一次吗?
|
JavaScript
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制
使用 RxJS timeout 操作符给 Angular SSR 服务器端渲染模式下的 HTTP 请求添加超时机制