如何在返回到 angular 中的调用方方法之前等待订阅完成

Question

以下是特定场景的代码流。首先，一个 POST 调用。此 POST 调用更新了数据库中 table 的列。然后，订阅它，并进行 GET 调用。使用此 GET 调用的结果，我更新了页面上的参数。完成这两个调用后，我应该进行 PUT 调用以更新一些变量（未从先前的 GET 调用中检索到），然后发出一个事件。下面是代码：

save({ job, status }) {
    this.apiService.serviceMethod(job, status);
    console.log('calls after publishTaskAction');
    this.apiService.updatePutMethod(job).subscribe(() => {
      console.log('after updateTask');
    });
    this.notify.emit('saved!');
  }

ApiService 方法：

serviceMethod(job: Model, status: string) {
    if (status) {
      let observ = of() as Observable<void>;
      if (status === 'Publish') {
        observ = this.firstPostMethod(task);
      }
      if (status === 'UnPublish') {
        observ = this.firstPostMethod(task);
      }
      console.log('calls before observ');
      observ.subscribe(() => {
        console.log('inside observ');
        this.firstGETCall(task).subscribe();
        console.log('after observ');
      });
    }
  }

我想要实现的是 serviceMethod 应该完成执行（完成 Post 和 Get 调用），然后返回到调用方方法并执行 updatePutMethod。正在发生的事情是执行返回调用者并执行 updatePutMethod，然后调用 observ.subscribe。因此，在后端，结果不符合预期。这是执行 console.logs 的顺序：

calls before observ
calls after publishTaskAction
before updateTask http call
inside observ
after observ
tafter updateTask

我遵循了这个解决方案：subscribe getting called after below codes execution?。并更新我的代码如下：

save({ job, status }) {
    this.apiService. serviceMethod(job, status).subscribe(
          (data) => {
            this.apiService.firstPostMethod(job).subscribe(
              (data) => {
                this.taskApiService.updateTask(task).subscribe();
              }
            );
            this.notify.emit('saved!');
          });
}

但这是错误的。此外，我从一些来源了解到不应从另一个订阅块调用订阅。因此，请提供任何建议。

Answer 1

这是 RxJS 的管道派上用场的地方。在调用最终订阅之前，您可以一个接一个地继续观察。

重申您想要的功能：在您的 UI 组件中，您按下 Save 按钮，这会获取作业和状态。您想要 POST 作业将任务保存到数据库，然后执行 GET 以检索其他数据。

注意，在继续之前，如果您正在 POST 保存 TASK 并且接下来的 GET 是检索更新的 TASK，您总是可以 return 从 [=23] 更新的 TASK =]打电话。

获得更新后的数据后，您可以更新 UI，然后更新一个额外的变量，然后您需要使用 PUT 调用更新该变量。

最后，一旦所有变量都被 POSTed、GETted、PUTted 和 UI 更新，您想要发送到父组件的所有操作都已完成。

我的推荐。

save(job: Model, status: string) {
    console.log('Starting apiService.serviceMethod');
    this.apiService.serviceMethod(job, status).pipe(
        switchMap((job: Model) => {
            if (job) {
                // Some update of job is require here since the GET call doesn't know 
                // whereas the UI does. 
                // Modify job variable here.
            
                console.log('Starting PUT call');
                return this.apiService.updatePutMethod(job); 
            } else {
                console.log('Skipping PUT call');
                return of(null);
            }
        })
    ).subscribe(() => {
        console.log("Ready to emit");
        this.notify.emit('Saved!');
    });
}


import { of } from 'rxjs';

serviceMethod(job: Model, status: string): Observable<Model> {
    if (status && (status === 'Publish' || status === 'UnPublish')) {
        console.log('Staring POST call');
        return this.firstPostMethod(task).pipe(
            switchMap((task) => {
                console.log('Starting GET call');               
                return this.firstGETCall(task);
            })
        );
    } else {
        // either status is null/empty or does not equal either of the strings.
        return of(null);
    }
}

如何在返回到 angular 中的调用方方法之前等待订阅完成

how to wait for the subscribe to finish before going back to caller method in angular

angularjs