优化api调用rxjs

如何解决优化api调用rxjs

我有一个数组，我想遍历该数组并在每个项目上调用服务器数据。我想显示一个微调框，因为我在加载页面时api处于待处理状态。

当前解决方案：

  getRecordings(classroom) {
    return this.sysAdminService.getMeetingRecordings(classroom.meeting_id).subscribe(res => {
      classroom.recordings = res;
    });
  }

Api通话：

 this.classRoomsToDisplay.map((classroom) => {
      classroom.showAttendees = false;
      classroom.recordings = null;
      this.getRecordings(classroom);
    });

如上所述，我订阅了数组中每个项目的可观察值。我想找到是否有更好的方法使用rxjs，concatMap吗？我不想等待整个数组的api调用完成，我想在该项目的api调用完成后立即显示结果。

解决方法

根据您显示的数据，您不清楚要使用哪个属性来显示数据。我假设它是classroom.showAttendees，因为它是布尔值。

您可以使用RxJS forkJoin函数来组合多个可观察对象并订阅一次，而不是进行多次订阅。然后，您可以使用showAttendees运算符将数组中每个项目的tap标志切换为副作用。

尝试以下

complete$ = new Subject<any>();

getRecordings(classroom): Observable<any> {   // <-- return the HTTP request observable
  return this.sysAdminService.getMeetingRecordings(classroom.meeting_id).pipe(
    tap => {
      classroom.showAttendees = true;         // <-- set the flag to show data
      classroom.recordings = res;
    }
  );
}

ngOnInit() {
  // `reqs` is an array of observables `[getRecordings(classroom),getRecordings(classroom),...]`
  const reqs = this.classRoomsToDisplay.map((classroom) => {
    classroom.showAttendees = false;
    classroom.recordings = null;
    return this.getRecordings(classroom);
  });

  forkJoin(reqs).pipe(takeUntil(this.complete$)).subscribe();   // <-- trigger the HTTP requests
}

ngOnDestroy() {
  this.complete$.next();        // <-- close open subscriptions
}

模板

<div *ngFor="classroom of classRoomsToDisplay">
  <ng-container *ngIf="classroom.showAttendees">
    {{ classroom.recordings }}
  </ng-container>
</div>

现在，由于我们是在tap运算符中分配值，因此每个项目的数据都会在到达时立即显示。

,

您应该更喜欢使用异步管道而不是订阅。

示例：

<ul>
  <li *ngFor="let attendee of attendeesWithData">Attendee: {{ attendee.attendee }},duplicated: {{ (attendee.duplication | async) || 'pending' }}</li>
</ul>

在此示例中，异步操作是字符串的重复，并且每次演示都花费更长的时间。

@Injectable()
export class DuplicateService {

  times = 1;

  constructor() { }

  getDuplicated(s: string): Observable<string> {
    return timer(1000 * this.times++).pipe(
      map(() => s + s),);
  }
}

@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private attendees: string[] = ['A','B','C','D','E','F'];

  attendeesWithData = this.attendees.map(attendee => ({ 
    attendee,duplication: this.duplicateService.getDuplicated(attendee),}));

  constructor(private duplicateService: DuplicateService) {}
}

结果，每个第二个列表项将其状态从暂挂状态切换到重复的字符串。

另请参阅堆栈闪电战：https://stackblitz.com/edit/angular-ivy-rtx6cg?file=src/app/app.component.ts