如何在 Angular 的同一页面上使用不同的 ID 进行并发 API 调用

Question

我有一个问题。 我正在 Angular 中构建一个组件，该组件需要显示特定登录用户的最后 10 个客户。 我已经构建了 API controller 以通过 ID 获取每个客户。 在我的服务中，我创建了一个调用 API 并按 id 返回信息的 Observable。

对于 10 个客户中的每一个，我都需要调用此服务并返回一些数据。 我已经尝试为每个 ID 调用服务（10 次），但这显然不是执行此请求的干净方式。

这是我迄今为止尝试过的，但这看起来非常错误和肮脏。

路线服务.ts

getCustomerAccessList10(): Observable<any> {
    this.loadToken();
    let httpOptions = { 
      headers: new HttpHeaders({ 'Content-Type': 'application/json','Authorization':'Bearer '+ this.authToken }) 
      };
    return this.http.get<any>(this.baseUrl + '/api/CustomerAccessList10', httpOptions);
  }

客户.component.ts

  customeraccesslist: CustomerAccessList[];
  dashboardInfo: DashboardInfo[];
  dashboardInfo1: DashboardInfo1[];
  dashboardInfo2: DashboardInfo2[];
  dashboardInfo3: DashboardInfo3[];
  dashboardInfo4: DashboardInfo4[];
  dashboardInfo5: DashboardInfo5[];
  dashboardInfo6: DashboardInfo6[];
  dashboardInfo7: DashboardInfo7[];
  dashboardInfo8: DashboardInfo8[];
  dashboardInfo9: DashboardInfo9[];

  id:number;

  // customer0;
  // customer1;
  // customer2;
  // customer3;
  // customer4;
  // customer5;
  // customer6;
  // customer4

  previousCustomer0;
  previousCustomer1;
  previousCustomer2;
  previousCustomer3;
  previousCustomer4;
  previousCustomer5;
  previousCustomer6;
  previousCustomer7;
  previousCustomer8;
  previousCustomer9;

ngOnInit() {
    this.routeService.getCustomerAccessList10().subscribe(
      res => {
        this.customeraccesslist = res;

    //array containing each ID
        let customerIdArray = this.customeraccesslist.map((x) => x.customerId);

        //map through array and get customerId from each object
        console.log(customerIdArray.splice(0,1));
        
        //assign each customerId in customerIdArray to a variable
        let previousCustomer0 = customerIdArray[0];
        let previousCustomer1 = customerIdArray[1];
        let previousCustomer2 = customerIdArray[2];
        let previousCustomer3 = customerIdArray[3];
        let previousCustomer4 = customerIdArray[4];
        let previousCustomer5 = customerIdArray[5];
        let previousCustomer6 = customerIdArray[6];
        let previousCustomer7 = customerIdArray[7];
        let previousCustomer8 = customerIdArray[8];
        let previousCustomer9 = customerIdArray[9];

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer0).subscribe(
        //   res0 => {
        //     this.dashboardInfo = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer1).subscribe(
        //   res0 => {
        //     this.dashboardInfo1 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer2).subscribe(
        //   res0 => {
        //     this.dashboardInfo2 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer3).subscribe(
        //   res0 => {
        //     this.dashboardInfo3 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer4).subscribe(
        //   res0 => {
        //     this.dashboardInfo4 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer5).subscribe(
        //   res0 => {
        //     this.dashboardInfo5 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer6).subscribe(
        //   res0 => {
        //     this.dashboardInfo6 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer7).subscribe(
        //   res0 => {
        //     this.dashboardInfo7 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer8).subscribe(
        //   res0 => {
        //     this.dashboardInfo8 = [].concat(res0);
        //   }
        // )

        // this.routeService.getCustomerCareDashboardInfoById(previousCustomer9).subscribe(
        //   res0 => {
        //     this.dashboardInfo9 = [].concat(res0);
        //   }
        // )

        //console.log(customer0)
        //let customer1 = customerIdArray[1];
        //console.log(customer1)
        //let customer2 = customerIdArray[2];
        //console.log(customer2)
        let customer3 = customerIdArray[3];
        //console.log(customer3)
        let customer4 = customerIdArray[4];
        //console.log(customer4)
        let customer5 = customerIdArray[5];
        //console.log(customer5)
        let customer6 = customerIdArray[6];
        //console.log(customer6)
        let customer7 = customerIdArray[7];
        //console.log(customer7)
        let customer8 = customerIdArray[8];
        //console.log(customer8)
        let customer9 = customerIdArray[9];
        //console.log(customer9)

        // this.id = customer0;

        // this.routeService.getCustomerCareDashboardInfoById(this.id).subscribe(
        //   res => {
        //     console.log(res);

        //     let customerRatingArray = this.dashboardInfo.map((x) => x.customerRating);
        //     customerRatingValueArray
        //   }
        // )
      }
    )

    //get dbo.CustomerCareDashboardInfo by CustomerID for each customer
    this.routeService.getCustomerCareDashboardInfoById(this.id).subscribe(
      res => {
        console.log(res);
        //customerRatingValueArray
      }
    )

  } 

任何帮助将不胜感激！

Answer 1

这很奇怪，也许我不明白，但你可以这样做：

let previousCustomer: Array<number> // creating an array of customer
customerIdArray.forEach(function (value) { 
  previousCustomer.push(value);  // push the value for each
}); 

下一步就是对你的电话做同样的事情

let dashboardInfo: Array<any>
previousCustomer.forEach(function (value){
this.routeService.getCustomerCareDashboardInfoById(value).subscribe(res0 => {
     dashboardInfo.push(concat(res0))
  })
})

我不知道这是否是您正在寻找的东西。 您将获得所有先前客户的数据数组

Answer 2

我会使用forkjoin，希望这会有所帮助。 分叉学习

我要警告的一个警告是当一个潜艇。 在 forkjoin 中失败他们都失败了，但这可以通过处理失败来克服。 我的 go 是.pipe(catchError(x => of(null))) ，所以当你添加 api 调用时，你可以推送类似myServiceMethod(id).pipe(catchError(x => of(null)))和循环查看结果时执行 null 检查

 //array containing each ID
let customerIdArray = this.customeraccesslist.map((x) => x.customerId);

const apiCalls = [];
  //map through array and get customerId from each object
console.log(customerIdArray.splice(0,1));
for(const id of customerIdArray) {
  apiCalls.push(myServiceMethod(id));
}
 forkJoin(apiCalls).subscribe((customerResults: any[])) => {
   console.log(customerResults[0]);
   for(const result of customerResults) {
     console.log(result);
   }
 }