Angular-将多个连续的API调用合并为一个结果 [英] Angular - merge multiple consecutive API calls into one result

问题描述

我正在学习rxjs，目前正面临不确定的解决方法.我需要调用多个API请求，但是问题是，首先我需要获取名称列表，然后为每个名称获取其余数据.到目前为止，我已经提出了两个 map 函数，第一个调用将获取名称列表，第二个 map 将遍历该列表并调用另一个请求以获取其余数据.我认为这是不好的做法，但我不明白如何使用 mergeMap 或 forkjoin 来获得更好的功能代码.

I'm in the process of learning rxjs and currently facing something I'm not quite sure how to tackle. I need to call multiple API requests, but the issue is that first I need to get a list of names, and then, for each name get the rest of the data. So far I've come up with two map functions, the first call will get list of names, and the second map will iterate over the list and call another request to get the rest of the data. I assume this is bad practice but I cannot understand how to use mergeMap or forkjoin to achieve a better functioning code.

  public getNames(): Observable<any> {
    return this.httpClient.get<response>(someUrl)
                          .pipe(map(res => res.results), map((data)=>{
                              data.forEach(dat => {
                               this.getDataByName(dat.name).subscribe(res => {
                                  dat.image = res.image;
                               });
                              });
                              return data;
                            }));
  }
  
  public getDataByName(name): Observable<any> {
    return this.httpClient.get<any>(urlToGetMoreDataByName)
                          .pipe(map(res => res.results));
  }

推荐答案

如果我正确理解您的问题，我会尝试以下方法

If I understand right your problem, I would try something along these lines

// remove the specification of the return type (: Observable<any>) since you
// should be able to achieve a more precise result using Typescript 
// type inference
    
public getNames() {
  return this.httpClient.get<response>(someUrl).pipe(
        map(res => res.results),
        // transform "data", which is an array of names in an array of Observables
        // this first map is the rxjs map operator
        map((data)=> {
           // this inner map is the javascript method of the array
           // for each dat it returns an Observable which emits when getDataByNme returns
           return data.map(dat => this.getDataByName(dat.name).pipe(
                                    // this is an rxjs map operator which retuns a
                                    // dat object with the image property set
                                     map(res => {
                                       dat.image = res.image;
                                       return dat
                                     })
                                  )
           )
       }),
       // concatMap is used here to make sure that we fire the execution of the 
       // Observable created by forkJoin after the first get operation has returned
       concatMap(arrayOfObservables => forkJoin(arrayOfObservables))
     );
}

现在， getNames 返回一个Observable，一旦执行了所有获取图像的调用，该Observable就会发出.确保使用 forkJoin 并行启动所有http get操作.我们可以使用其他运算符，例如`mergeMap，如果我们想控制并发级别.

Now getNames returns an Observable which emits once all the calls to fetch the images have been executed. Using forkJoin we make sure we launch all the http get operations in parallel. We could use other operators, e.g. `mergeMap, if we wanted to control the concurrency level.

您可能会发现有关哪些运算符可以与http操作一起使用的启发

You may find some inspiration about which operators can be possibly used with http operations in this article.

这篇关于Angular-将多个连续的API调用合并为一个结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！