使用 Angular 6 在后台进行多个 http 请求答案

【问题标题】：Multiple http request in the background using angular 6使用 Angular 6 在后台进行多个 http 请求
【发布时间】：2018-09-20 00:02:32
【问题描述】：

我必须小批量获取数据以完成我在前端已有的数据，因此，假设我有数百个 id、name 和其他字段为空的对象，因为我必须通过传递 id 从另一个端点获取它们，但是，这个另一个端点非常慢，我需要为在“不中断任何其他请求”的情况下，在后台说 5。

最好的方法是什么？并将获取的数据附加到对象列表中的相应项目？

【问题讨论】：

标签： angular http rxjs

【解决方案1】：

如果我理解正确，您可以从一组您知道 id 和 name 的对象开始。您需要使用可以使用慢速 API 获取的附加数据填充所有这些对象，因此您不希望一次发出超过 5 个此类请求。

假设此类 API 的调用是通过方法 getDataForId(id) 实现的，并且使用从 API 检索到的附加数据填充对象是由方法 populate(obj, data) 执行的，其中 obj 是必须填充，data 是用于填充对象的原始数据。

如果没问题，您可以考虑采用这些方法

const objArray = [
  {id: 123, name: 'first'},
  {id: 456, name: 'second'},
  ......
  {id: xyz, name: 'last'},
];

    from(objArray).pipe(
       mergeMap(
          obj => getDataForId(objArray.id).pipe(
             map(data => populate(obj, data))
          ), 5
       )
    )
    .subscribe()

替代实现 - 在评论之后

您也可以考虑从后端获取列表，然后以 5 个为一组获取包含完整详细信息的项目。您可以使用如下代码实现此目的

getListOfIds().pipe(
   bufferCount(5),
   map(arrayOf5Ids => getDataForId(objArray.id).pipe(
             map(data => populate(obj, data))
   )),
   switchMap(arrayOf5Observables => forkJoin(arrayOfObservables)),
)
.subscribe(arrayOf5Items => // do what you want}

【讨论】：

完美，这正是我的情况。然而，当我对此进行调查时，我有了另一个想法。在第一次调用时，我得到了整个对象列表，我调用慢速 API 并返回 5 个具有完整数据而不是长不完整列表的项目？您认为这比显示等待填充的不完整数据列表可行且更好吗？
首先获取列表，然后一次获取 5 个项目的完整详细信息是可行的。请参阅我的更新答案。如果这更好，我不知道。我认为这取决于您要实现的要求。
谢谢你的更新，我还是不明白，我尽快去试试。主要不是解决了我在stackoverflow.com/questions/52436049/…这里发的问题吗？
我今天不得不回到这个，因为另一种方法导致了一些问题。我只是不知道如何过滤或有一些逻辑？因为我不需要为每个人从慢速 API 中获取数据，让我们根据名称说？
你可以像getListOfIds().pipe(filter(obj => // your filter logic), bufferCount(5), .....)一样使用filter

【解决方案2】：

你可以像这样使用mergeMap

  this.http.get('/api1').pipe(
      mergeMap(character => this.http.get('/api2'))
    ).subscribe(() => {
       ....  
    });

参考文献 - Angular Multiple HTTP Requests with RxJS

【讨论】：