Angular Rxjs多个并行HTTP请求/调用阻止导航-优先级取消队列并发

我知道有类似的线程，但没有一个能为我的问题提供合适的解决方案

Pre：我同时在服务器端和客户端进行导航。这意味着前端上使用routerLink的每个导航以及任何被调用的路由都伴随着对服务器的HTTP请求调用

情景：我正在打开一个对话框，以显示创建职位的表单。对于这个位置，我需要显示从API加载的元素列表。对于每个元素，我需要加载额外的缩略图。所以我需要一个API调用来获取86个元素，然后86个请求来获取缩略图。我将这些元素保存在服务中，以防止再次加载它们。因此，在加载元素之前，我将检查是否已经存在元素。API调用在我打开对话框时启动

getElementsWithThumbnails{ 如果this.elementsSource.value.length==0{ this.apiService.getElements.subscribe 下一步=>{ this.elementsSource.nextnext； this.elementsSource.value.forEachepl，索引=>{ 常量格式='JPG'； this.apiService.getThumbnailepl.id，格式为“400”、“400”、“true”。订阅 blob=>{ epl.thumboil=blob； } ; }; } ; } } ThumbnailRequestMethod：

简陋的 elementId:string，格式：string，宽度：string， 高度：string，sameratio:string ：可见{ 返回this.httpClient.get 这是apiUrl+ `/elements/${elementId}/thumbnail？format=${format}&width=${width}&height=${height}&sameratio=${sameratio}` , { 响应类型：“blob” }.烟斗 mapres=>{ 返回此.blobtosinitizedurres； } ; } 问题：如果用户决定取消表单并希望向前/向后导航-他不能，因为导航请求位于队列的末尾

有并没有什么方法可以将较低的缩略图调用的优先级设置为在较小的负载下处理

---

提前感谢。

问题在于浏览器对同一端点的并行请求有限制。api是否与前端位于同一原点？如果不是的话，限制可能会更低

在我看来：

为缩略图使用URL。我假设你在一些img标签中显示它们。为什么不设置href并让浏览器处理图像的加载呢。根据这个想法，您可以使用inview指令延迟图像的加载，直到它们实际在视图中为止。这还取决于业务和需求

将并行请求限制为getThumbnail。您可以使用mergeMap的concurrent参数执行以下操作：

---

1.在本用例中不可能，因为图像位于文件驱动器上。2.像一个魔咒一样工作，合并图中缺少一个返回，但其他一切都很好。@liqSTAR啊，是的，我想我一开始想要的是不带花括号的：

const format = 'JPG';
this.apiService.getElements()
  .pipe(
    switchMap(items => {
      this.elementsSource.next(items);
      return from(items);
    }),
    mergeMap(item => {
      return this.apiService
        .getThumbnail(item.id, format, '400', '400', 'true')
        .pipe(
          tap(blob => item.thumbnail = blob)
        )
    }, 2) // max 2 requests in parallel
  )
  .subscribe();