在 Typescript 中使用 Async Await 设置响应数据

Question

I am hitting my API five times with different request data and pushing all response to an array and using.map to map the response array to my original array to set data but it is not working correctly my response data show it is undefined.

Mycode: Status is the request data I am hitting to API to get response and statusArray is the array I need to set the data from response.

statusArray = [
{
status: "Submitted",
count: 0
},
{
status: "Approved",
count: 0
},
{
status: "Rejected",
count: 0
},
{
status: "Open",
count: 0
}

]; 
 arr;
 temp =[]; 
 status = ["Submitted", "Approved", "Rejected", "Open"];
 async sendToApi(){
    for(let val of this.status)
    {
     this.arr = await this.getdata(val);
    }
    console.log(this.arr);
     await this.resolveData(this.arr);
}
async getdata(status)
  {
    this._service.getStatusBasedCount(status).pipe(takeUntil(this._onDestroy))
    .subscribe(async res =>{
      if(res['err'] == 'N')
      {
       this.temp.push({status: res['dataType'], count: res['dataTypeValue']});
       return this.temp;
      }
      
    });
   
   
  }
  async resolveData(arr)
  {
    let data  = arr;
    console.log(data);
    this.statusArray=   this.statusArray.map((item, row) => {
      const found = data.find(
        element => item.status == element.status
      );
      return { ...item, ...found };
    });
    
  }

For me the return this.temp return value but when i assign it to arr and print it in console it get undefined. Can I know how to do this?

Answer 1

I don't see the need for async/await here. It would serve better to restructure the array as an object and use Object.key() with RxJS forkJoin to trigger all the requests in parallel. It could then be piped in with RxJS map operator to transform the data.

Try the following

status = {
  "Submitted": 0,
  "Approved": 0,
  "Rejected": 0,
  "Open": 0
}

getData() {
  forkJoin(
    Object.keys(this.status).map(status => 
      this._service.getStatusBasedCount(status).pipe(
        tap(res => {
          if (res['err'] == 'N') this.status[res['dataType']] = res['dataTypeValue']
        })
      )
    )
  ).subscribe();
}