SAP Spartacus home页面product的加载逻辑

loadProduct$ = createEffect( () => ({ scheduler, debounce = 0 } = {}): Observable< ProductActions.LoadProductSuccess | ProductActions.LoadProductFail > => this.actions$.pipe( ofType(ProductActions.LOAD_PRODUCT), map((action: ProductActions.LoadProduct) => ({ code: action.payload, scope: action.meta.scope, })), // we are grouping all load actions that happens at the same time // to optimize loading and pass them all to productConnector.getMany bufferDebounceTime(debounce, scheduler), mergeMap((products) => merge( ...this.productConnector .getMany(products) .map(this.productLoadEffect) ) ), withdrawOn(this.contextChange$) ) );

待加载的product：

[{"code":"300938","scope":"list"},{"code":"358639","scope":"list"},{"code":"553637","scope":"list"},{"code":"816802","scope":"list"},{"code":"1934793","scope":"list"},{"code":"1382080","scope":"list"},{"code":"1981415","scope":"list"},{"code":"816780","scope":"list"},{"code":"1934406","scope":"list"},{"code":"1986316","scope":"list"},{"code":"592506","scope":"list"},{"code":"932577","scope":"list"},{"code":"1776948","scope":"list"},{"code":"1641905","scope":"list"},{"code":"1934796","scope":"list"},{"code":"2278102","scope":"list"},{"code":"1992693","scope":"list"}]

occ-product.adapter.ts:

loadMany(products: ScopedProductData[]): ScopedProductData[] { const scopedDataWithUrls: ScopedDataWithUrl[] = products.map((model) => ({ scopedData: model, url: this.getEndpoint(model.code, model.scope), }));

注意这里的product id，似乎还是单个单个产品进行加载？

在occ-product.adapter.ts里，这里使用到了OccEndpointsService：

上图getUrl的参数说明:

第二个参数urlParams类型为对象。 product是硬编码的：

最后测试结果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

汪子熙 认证博客专家 前端框架 Node.js SAP JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。2020年5月下旬，Jerry做了脑部肿瘤的开颅切除手术，对编程和人生又有了新的感悟。