Angular 5 - асинхронные сервисные вызовы в двух разных компонентах (первый метод не ожидает ответа БД) - PullRequest
Новая
       29

Angular 5 - асинхронные сервисные вызовы в двух разных компонентах (первый метод не ожидает ответа БД)

1 голос
/ 05 марта 2019

Мне нужно выполнить две разные транзакции с БД для одного события (щелчка).

Первый вызов: сохранение данных в БД.

Второй вызов: получить сохраненные данные первого вызова из БД

Эти вызовы разделены на два разных компонента и имеют дело с одной общей таблицей БД.

Мой подход ниже:

Первый компонент 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(); завершает транзакцию БД раньше, чем Сохранить Транзакция БД метода завершена и ответ возвращается.

Мне нужно, чтобы вызов службы для метода «Сохранить» ожидал ответа БД и затем переходил к методу «Получить» в другом компоненте.

Вкратце: this.getSavedData(); не должен выполняться до тех пор, пока this.SaveData(); не завершит свое полное выполнение, возвращающее ответ.

Чего мне не хватает?

Ответы [ 3 ]

1 голос
/ 05 марта 2019

Создайте службу с именем 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.
0 голосов
/ 05 марта 2019

Вам может потребоваться вызвать onDestroy что-то вроде следующего кода. 

  async ngOnDestroy() {
    const res = await this.saveData(); 
  }
0 голосов
/ 05 марта 2019

Если компонент, отвечающий за получение данных, является дочерним по отношению к тому, который его сохраняет, я бы рекомендовал передать данные от родителя к потомку с привязкой ввода .

В противном случае вы можете создать общую службу для уведомления родственных компонентов.

Смотрите мой ответ здесь

...