Angular - 使用 RxJS 使用 foreach 多次调用 http答案

【问题标题】：Angular - Multiples calls http with foreach using RxJSAngular - 使用 RxJS 使用 foreach 多次调用 http
【发布时间】：2020-10-06 15:51:55
【问题描述】：

这是我第一次在我的 Angular 项目中使用 RxJS。我有足够的疑问，需要一些帮助。

这是我的原始代码

loadOperations() {
    this.operationsListData = [];
    this.operationsList = [];
    this.operationsService.getOperations(this.selectedVariable).subscribe(data => {
      this.operationsData = data;
      if (data.length != 0) {
        const variablesOperations = this.operationsData.map(p => p.variable_operations);
        var arr = Object.getOwnPropertyNames(variablesOperations[0]);
        arr.forEach(clave => {
          var name = variablesOperations[0][clave];
          this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).subscribe(
            data => {
              data.name = variablesOperations[0][clave];
              this.operationsListData.push(data);
            },
          );
        });
      }
    });
  }

getOperationsByUuid(operation: string, uuid: string): Observable<OperationList> {
    ...
    return this.http.get<OperationList>(url);
  }

getOperations(selectedVariables: any): Observable<Operations[]> {
    ....
    return this.http.get<Operations[]>(url);
  }

现在我已经使用了 RxJS。这就是我目前所拥有的。但是，它没有得到我需要的东西。问题是concatMap。在我的原始代码中，我有一个遍历数组并调用服务的 foreach。但是，我不知道如何在 RxJS 中制作那段代码，也不知道在 return 中放什么。

var variablesOperations;
const combined = this.operationsService.getOperationsByUuid(this.selectedVariable).pipe(
      switchMap(data => {
        this.operationsData = data;
        if (data.length != 0) {
          variablesOperations = data.map(p => p.variable_operations);
          var arr = Object.getOwnPropertyNames(variablesOperations[0]);
          console.log(arr);
          return of(arr)
        }
      }),
      //This is wrong and it is what I need help with
      concatMap((arrayClaves) => {
        arrayClaves.forEach( clave => {
          this.operationsListService.getOperationsByUuid(variablesOperations[0][clave], clave)
        })
        return null; 
      })
    )

combined.subscribe(
      data => {
        console.log(data);
      },
      err => {
        console.log(err);
      }
    );

总而言之，我需要知道如何使用 RxJS 对我的原始代码进行 foreach。谁能帮帮我？

【问题讨论】：

标签： angular typescript rxjs angular-httpclient

【解决方案1】：

试试这个：

this.operationsService.getOperations(this.selectedVariable).pipe(
      tap(data => this.operationsData = data),
      filter(data => data.length != 0),
      map(data => data.map(p => p.variable_operations)),
      switchMap(variablesOperations => {        
        return forkJoin(Object.getOwnPropertyNames(variablesOperations[0]).map(clave => {
            return this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).pipe(
                map(data => ({ ... data, name: variablesOperations[0][clave] })),
            );
        }));
      }),
    ).subscribe(operationsListData => this.operationsListData = operationsListData);

【讨论】：

成功了！非常感谢。还有一个问题：如果对 getOperationsByUuid 的调用返回错误，我应该在哪里获取它？很抱歉给您带来不便

【解决方案2】：

如果你只是想在你的管道中调用或做一些事情，你可以使用 tap()。

例如：

myObservable.pipe(
   tap(myValue => {
      console.log(myValue);
   }
);

【讨论】：

我如何在 foreach 循环和调用 http getOperationsByUuid 中使用“tap”？
用它代替 concatMap