Javascript Promise, а затем с Http Services не работает в порядке

Question

Я пытаюсь использовать Promise с последующим использованием then (), чтобы заставить некоторый код работать асинхронно. Моя цель - при запуске функции addTimeToTimecard () обещание запустит другую функцию с запросом http внутри, а затем вернется к then () и запустит вторую службу http.

addTimeToTimecard() {

const promise = new Promise((resolve, reject) => {
  this.checkAndCreateTimecard();
  resolve();
});

// everything in the function above needs to complete before the upcoming http request
promise.then(() => {
console.log("do the patch")

 this.httpService.patch('setTimeIn/', { timeVar: "TimeIn", timeAmount: this.time1 }).subscribe()

})

  checkAndCreateTimecard() {
    this.httpService.get('timecard/fullTimecard/' + this.workDate).subscribe((ft: any) => {
      console.log("got the timecard")
  )}
 }

//output:
do the patch
ERROR timecard doesn't exist
got the timecard

Мне приходилось прибегать к использованию SetTimeout (), чтобы заставить код работать таким образом, но я знаю, что использование Promises или async / await - лучший способ сделать что-то. Что я здесь не так делаю и как лучше всего использовать обещания?

Answer 1

Поскольку вы используете Angular, возможно, имеет смысл объединить запросы, используя оператор switchMap:

addTimeToTimecard() {
  return this.checkAndCreateTimecard()
    .pipe(switchMap(data => {
      return this.httpService.patch("setTimeIn/", { timeVar: "TimeIn", timeAmount: this.time1 });
    });
}

checkAndCreateTimecard() {
  return this.httpService.get("timecard/fullTimecard/" + this.workDate);
}

Если вы действительно хотите по какой-то причине использовать обещания [оператор toPromise ] (https://www.learnrxjs.io/learn-rxjs/operators/utility/topromise) может помочь вам.

addTimeToTimecard() {
  return this.checkAndCreateTimecard()
    .then(data => {
      return this.httpService.patch("setTimeIn/", { timeVar: "TimeIn", timeAmount: this.time1 }).toPromise();
    })
}

checkAndCreateTimecard() {
  return this.httpService.get("timecard/fullTimecard/" + this.workDate).toPromise();
}

PS Я бы порекомендовал жить с Observables