Angular：按调用顺序接收响应

Question

您好，我对 Angular 和 Observables 很陌生

我正在尝试通过循环通过他们的 ID 获取对象。 但不要按顺序收到我的回复。

例子

get ID(1)
get ID(2)
get ID(3)
Receive Object ID(2)
Receive Object ID(3)
Receive Object ID(1)

是否有可能让我的对象恢复正常？ 下面是我多次调用我的服务函数的地方：

conferences-attendance.component.ts

  ExportExcelAttendance() {
    for (var i = 0; i < this.contactsAttendance.length; i++) {
      this.practiceService.GetPracticebyDBID(this.contactsAttendance[i].practiceId)
        .subscribe(
        (practice: Practice) => {
          this.practicesAttendance.push(practice);
          if (this.practicesAttendance.length == this.contactsAttendance.length) {
            this.ExportExcelAttendance2();
          }
        },
        error => this.errorMessage = <any>error
        );
    }
  }

这是我在服务中的功能，我接收数据的地方（不是按调用顺序）。

practices.service.ts

    GetPracticebyDBID(id: string) {
        let params: URLSearchParams = new URLSearchParams();
        params.set('thisId', id);
        let requestOptions = new RequestOptions();
        requestOptions.params = params;
        return this.http.get('http://ec2-34-231-196-71.compute-1.amazonaws.com/getpractice', requestOptions)
            .map((response: Response) => {
                return response.json().obj;
            })
            .catch((error: Response) => Observable.throw(error.json()));
    }

Answer 1

您应该使用concatAll 运算符来确保按顺序调用您的可观察对象。

另外，您可以使用completed 回调来调用ExportExcelAttendance2，而不是检查每个响应回调的practicesAttendance 长度。

查看以下示例：

let contactsAttendanceObservables = this.contactsAttendance
  .map((item) => {
    return this.practiceService.GetPracticebyDBID(item.practiceId);
  });
Observable.of(...contactsAttendanceObservables)
  .concatAll()
  .subscribe(
    (practice: Practice) => {
      this.practicesAttendance.push(practice);
    },
    (err) => {
      // handle any errors.
    },
    () => {
      // completed
      this.ExportExcelAttendance2();
    }
  );

如果你仍然希望你的 observables 并行运行，你可以使用 forkJoin 操作符，当所有 observables 完成时，它会将所有传递的 observables 的最后一个值发送给一个订阅者。

查看以下示例：

let contactsAttendanceObservables = this.contactsAttendance
  .map((item) => {
    return this.practiceService.GetPracticebyDBID(item.practiceId);
  });
Observable.forkJoin(...contactsAttendanceObservables)
  .subscribe(
    (practices: Practice[]) => {
      this.practicesAttendance = practices;
      this.ExportExcelAttendance2();
    }
  );

Answer 2

forkJoin operator 使用简单。它一直等到所有可观察对象完成，然后发出一个包含所有已发出项目的数组。

ExportExcelAttendance() {
  const all = this.contactsAttendance.map(it => this.practiceService.GetPracticebyDBID(it.practiceId));
  Rx.Observable.forkJoin(all)
    .subscribe(
      practicesAttendance => this.ExportExcelAttendance2(practicesAttendance),
      error => this.errorMessage = < any > error);
}

Answer 3

forkJoin 给你的代码少一点，

const arrayOfFetches = this.contactsAttendance
  .map(attendee => this.practiceService.GetPracticebyDBID(attendee.practiceId) );

Observable.forkJoin(...arrayOfFetches)
  .subscribe((practices: Practice[]) => {
      this.practicesAttendance = practices;
      this.ExportExcelAttendance2();
  });

编辑 折断！ @Anas 打败了我。虽然，我认为你不需要concatAll()