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

Question

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

第一次调用：将数据保存到数据库。

第二次调用：从数据库中获取第一次调用的保存数据

这些调用分为两个不同的部分，处理一个公共数据库 Table。

我的方法如下：

第一个组件 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 方法的数据库事务完成并返回响应之前更早地完成了它的数据库事务。

我需要 'Save' 方法的服务调用应该等待数据库响应，然后继续其他组件中的 'Get' 方法。

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

我错过了什么？

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

在你的第二个组件中，订阅服务的数据 $ 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.

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

Angular 5 - Asynchronous Service Calls in two different components (First Method Not waiting for DB response)

asynchronous

angular

angular-observable

angular5