乐趣区

关于前端:Angular-HTTPClient-发送请求的触发方式讨论

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

这实用于所有 HttpClient 办法。

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

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 快捷键来减速文件间的切换。

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

这里代码第 26 行应用了 exhaustMap,这个 Operator 的成果和 switchMap 相同。

如果申请 A 曾经收回但尚未被服务器端解决,那么申请 B 再收回,switchMap 会主动 cancel A 申请,发送 B 申请。

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

exhaustMap 实用于应答那些当点击了一个按钮之后察觉页面没有任何反映,于是偏向于反复点击同一按钮的用户。

退出移动版