使用角6在后台使用多个http请求

Question

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

做这件事的最佳方法是什么？并将获取的数据附加到对象列表中的相应项中？

Answer 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()

替代实现-在注释之后

您还可以考虑从后端获取列表，然后用完整的详细信息以块的形式获取项目。您可以使用如下代码来实现这一点

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}

Answer 2

您可以使用mergeMap，如下所示

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

参考文献- 使用RxJS的多个HTTP请求的角度