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

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.SaveData(); 完成其整个执行并返回响应，否则不应执行this.getSavedData();。

我错过了什么？

Answer 1

如果负责获取数据的组件是保存数据的组件的子组件，我会推荐pass data from parent to child with input binding。

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

See my answer here

Answer 2

您可能需要调用 onDestroy 类似下面的代码。

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

Answer 3

创建一个名为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); 
  }
}

在您的第二个组件中，订阅服务的 data$ Observable：

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.