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给你少一点代码，

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

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

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

Answer 3

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);
}

Angular : 按调用顺序接收响应

Angular : Receive responses in order with the calls

subject

node.js

observable

rxjs

angular