等待多个请求完成的正确方法是什么？

编程问答 2022-06-10

问题描述

我有一个需要多个get请求才能返回我需要的所有数据的组件。它们彼此独立，但是我想一起完成所有调用，并在成功完成后加载UI。

要实现此目的，我使用forkJoin，但是我是RxJS的新手，我并不完全肯定我正确地做到了这一点。请在下面查看我的示例。任何帮助将不胜感激。

import { Component,Input,OnInit,ElementRef,ViewChild } from '@angular/core';
import { Observable,forkJoin,of } from 'rxjs';
import { flatMap } from 'rxjs/operators';
import { DataService,ItemGroupDto} from 'src/app/shared/services/data-service.service';
import { UserService} from 'src/app/shared/services/user-service.service';

@Component({
  selector: 'app-sample',templateUrl: './sample.component.html',styleUrls: ['./sample.component.less']
})

export class SampleComponent implements OnInit {

  @Input() itemGroupId: number;
  public datasetOne: Observable<any[]>;
  public datasetTwo: Observable<any[]>;
  public currentApprover: string;

  constructor(
    private _dateService: DateService,private _userService: UserService,) {}

  ngOnInit() {
    this.getData();
  }

  private _getApprover(itemGroupId: number) : Observable<ItemGroupDto> {
    const approver = this._userService.getApprover(itemGroupId);
    approver.subscribe(results => {
      const approver = results.approvers.find(approver => (
        approver.Id === 1
      ));
      this.currentApprover = approver.UserFullName;    
    })
    return approver;
  }

  private _sampleDatasetOne() : Observable<any>{
    const sampleDatasetOne = this._dataService.sampleDatasetOne();
    sampleDatasetOne.subscribe(results => {
      this.datasetOne = results;
    })
    return sampleDatasetOne;
  }

  private _sampleDatasetTwo() : Observable<any>{
    const sampleDatasetTwo = this._dataService.sampleDatasetTwo();
    sampleDatasetTwo.subscribe(results => {
      this.datasetTwo = results;
    })
    return sampleDatasetTwo;
  }


  getData() {
    let sampleDatasetOne = this._sampleDatasetTwo();
    let sampleDatasetTwo = this._sampleDatasetTwo();
    let approver = this._getApprover(this.itemGroupId);
    
    forkJoin(sampleDatasetOne,sampleDatasetTwo,approver).subscribe(_ => {
      // all observables have been completed
      this.loaded = true;
    });
  }
}

以上代码基于我在为此目的使用forkJoin时发现的示例。这非常适合我的需求。它使我可以操纵每个订阅中每个订阅的结果，然后在完成所有可观察项后，例如可以通过* ngIf或等效项在视图中显示数据。

但是，我也看到了如下示例：

let sampleDatasetOne = this._dataService.sampleDatasetOne();
let sampleDatasetTwo = this._dataService.sampleDatasetTwo();
let approver = this._userService.getApprover(this.itemGroupId);

forkJoin([sampleDatasetOne,approver]).subscribe(results => {
      this.datasetOne = results[0];
      this.datasetTwo = results[1];
      const approver = results[2].approvers.find(approver => (
        approver.Id === 1
      ));
      this.currentApprover = approver.UserFullName; 
    });

实际上，我在网上的示例或教程中看到了很多，解释了forkJoin的这种特殊用法。这似乎有点疯狂，难以阅读，维护等。但是也许我只是缺少一些关键信息或概念？

本质上，我只是在寻找正确的angular / rxJS方法，以等待多个调用完成并处理/处理每个结果。

如果我处在正确的轨道上，我有什么想念的地方吗，做错了或者可以改善？

感谢任何人花时间回答并帮助我解决这个问题。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularfork-joinrxjstypescripttypescript