Angular 与可观察对象的同步调用

Question

我有一种情况，我在我的打字稿文件中定义了一个变量diary: Diary。当用户单击某个保存按钮时，我必须执行 f1，具有以下结构的函数：

public f1() {
   if (condition 1) {
      this.service.serviceCall(param).subscribe(res =>
         diary.firstPage.push(res)
      )
   }

   if (condition 2) {
       this.service.serviceCall(param).subscribe(res =>
          diary.secondPage.push(res)
   }

   if (condition 3) { ... }

   ...
}

f1() 在 f2() 之前执行，它执行以下操作：

public f2() {
   this.diaryService.saveDiary(diary).subscribe();
}

由于f1修改了diary标签，所以我必须确保f2只有在f1的所有订阅都完成后才会执行。我该怎么做？

Answer 1

在这里考虑 Promise 方法应该很容易，您可以在其中等待所有响应，然后最后进行保存调用：

public async f1() {
  try {
    if (condition 1) {
        const res = await this.service.serviceCall(param).toPromise();
        diary.firstPage.push(res)
    }

    if (condition 2) {
        const res = await this.service.serviceCall(param).toPromise();
        diary.secondPage.push(res)
    }

    //at the end
    this.f2();

  } catch() {
    // something heer
  }
}

这也可以使用 maybe forkJoin 来解决，您可以根据条件准备一组 Observable，最后在 forkJoin 订阅中进行 f2 调用。这为您提供了并行调用的优势。

ForkJoin

public f1() {
  const allApis: any = {};
  
  if (condition 1) {
    allApis.firstPage = this.service.serviceCall(param);
  }

  if (condition 2) {
      allApis.secondPage = this.service.serviceCall(param);
  }

  //at the end
  forkJoin(allApis).pipe(tap((responses) => {
    Object.entries(responses).forEach(([k, v]) => {
      diary[k].push(v)
    });
  })).subscribe(() => {
    this.f2()
  });
}

Angular 与可观察对象的同步调用

Angular synchronous calls with observables

angular

synchronization

subscription