Question

我必须在一个（单击）事件上执行两个不同的数据库事务。

首次通话：将数据保存到数据库。

第二个呼叫：从数据库获取第一个呼叫的已保存数据

这些调用分为两个不同的组件，并处理一个公共数据库表。

我的方法如下：

第一组件TS：

ngOnDestroy(){ this.saveData(); }

第二部分TS：

ngOnInit(){ this.getSavedData(); }

要执行的第一个方法的服务调用：

 saveData(obj) {
    return this.http.post(environment.appUrl + 'saveDataApi', obj).toPromise()
      .then(res => <any>res); }

这两种方法都按编码顺序触发。但是我的问题是this.getSavedData();在 Save 方法的数据库事务完成并返回响应之前更早完成了数据库事务。

我需要对“保存”方法的服务调用应等待数据库响应，然后继续执行其他组件中的“获取”方法。

简而言之：this.getSavedData();除非this.SaveData();完成其整个执行并返回响应，否则不要执行。

我想念什么？

Answer 1

创建一个名为data.service.ts的服务（您希望使用的名称）来处理HTTP调用。制作一个saveData方法。从第一个组件进行调用（尽管我不确定ngOnDestroy是否是进行此类调用的最佳位置）：

ngOnDestroy(){ this.dataService.saveData(); }

以某种方式实现您的服务，使其在响应成功时从服务中发出结果：

@Injectable()
export class DataService {
  private _data$ = new ReplaySubject(1);
  public data$ = this._data$.asObservable();

  saveData(obj) {
    return this.http.post(environment.appUrl + 'saveDataApi', obj).pipe(
      tap(res => this._data$.next(res)
    )
      .toPromise()
      .then(res => <any>res); 
  }
}

在第二个组件中，订阅服务的数据$可观察：

ngOnInit() {
  this.dataSubscription = this.dataService.data$.subscribe(() => [..])
}

在离开组件时，别忘了退订：

ngOnDestroy() {
  this.dataSubscription.unsubscribe();
}

Or bind data$ to your template directly using the async pipe.
Maybe you should consider adding a state management framework to your application, like ngRX, but that is a bigger jump.

Answer 2

如果负责获取数据的组件是保存数据的子组件，我建议使用pass data from parent to child with input binding。

否则，您可以创建一个共享服务来通知同级组件。

See my answer here

Answer 3

您可能需要调用onDestroy之类的以下代码。

  async ngOnDestroy() {
    const res = await this.saveData(); 
  }

Angular 5-两个不同组件中的异步服务调用（第一种方法不等待数据库响应）

3 个答案: