JS 等待一个函数，直到它接收到数据

Question

当涉及到首字母缩略词方法时，我总是陷入困境，因为我的代码遇到了一些问题。 希望你们能帮帮我。

所以基本上，我在 onInit 上有 2 个功能； 但是，当“fetchSalesbyDay2”运行时，this.firstResponse 正在接收 undefined 并且不保存来自“fetchSalesbyDay1”的第一个响应

ngOnInit(): void {
    this.fetchSalesbyDay1();
    this.fetchSalesbyDay2();
}

fetchSalesbyDay1 = async () => {
    const params = {
        'reportName': 'home_report',
        'query': {
            'metric': 'salesByDay',
            'showBy': this.period.toString(),
            'startDate': parseInt(moment(this.range1sDate, 'MM-DD-YYYY HH:mm').format('X'), 10),
            'endDate': parseInt(moment(this.range1eDate, 'MM-DD-YYYY HH:mm').format('X'), 10)
        }
    };

    await this.http
        .post(this.GLOBALURL + '/reports/query', params, this.httpOptions1)
        .subscribe((response: any) => {
            this.firstResponse = response;
        });
}

fetchSalesbyDay2 = async () => {
    const params = {
        'reportName': 'home_report',
        'query': {
            'metric': 'salesByDay',
            'showBy': this.period.toString(),
            'startDate': parseInt(moment(this.range2sDate, 'MM-DD-YYYY HH:mm').format('X'), 10),
            'endDate': parseInt(moment(this.range2eDate, 'MM-DD-YYYY HH:mm').format('X'), 10)
        }
    };
    await this.http
        .post(this.GLOBALURL + '/reports/query', params, this.httpOptions1)
        .subscribe((response: any) => {
            this.secondResponse = response;
            this.displayandprocessWeekData(this.firstResponse, this.secondResponse);
        });
}

我希望，一旦“fetchSalesbyDay1”完成，并且 this.firstResponse 已经有一个值，“fetchSalesbyDay2”就可以执行了。 解决这个问题的最佳方法是什么？

Answer 1

在不更改代码的情况下，您可以在 fetch 函数之外添加 await，如下所示：

fetchSales = async () => {
   await fetchSalesbyDay1();
   await fetchSalesbyDay2();
}

这样 fetchSalesbyDay2() 将等待第一个完成。

Answer 2

基本上没有理由将 observables 转换为 promises。 Observables 提供了更好的选择来组合异步数据。 在这种特定情况下，您可以使用 RxJS forkJoin函数来组合两个可观察对象

尝试以下

import { forkJoin, Observable } from 'rxjs';

ngOnInit(): void {
  forkJoin({          // <-- use `forkJoin` to trigger HTTP requests in parallel
    firstRes: this.fetchSalesbyDay1(),
    secondRes: this.fetchSalesbyDay2()
  }).subscribe({
    next: ({firstRes, secondRes}) => {
      this.displayandprocessWeekData(firstRes, secondRes);
    },
    error: error => {
      console.log(error);
      // handle error
    }
  });
}

fetchSalesbyDay1(): Observable<any> { // <-- return the observable
  const params = {
    'reportName': 'home_report',
    'query': {
      'metric': 'salesByDay',
      'showBy': this.period.toString(),
      'startDate': parseInt(moment(this.range1sDate, 'MM-DD-YYYY HH:mm').format('X'), 10),
      'endDate': parseInt(moment(this.range1eDate, 'MM-DD-YYYY HH:mm').format('X'), 10)
    }
  };

  return this.http.post(this.GLOBALURL + '/reports/query', params, this.httpOptions1);
}

fetchSalesbyDay2(): Observable<any> { // <-- return the observable
  const params = {
    'reportName': 'home_report',
    'query': {
      'metric': 'salesByDay',
      'showBy': this.period.toString(),
      'startDate': parseInt(moment(this.range2sDate, 'MM-DD-YYYY HH:mm').format('X'), 10),
      'endDate': parseInt(moment(this.range2eDate, 'MM-DD-YYYY HH:mm').format('X'), 10)
    }
  };
  
  return this.http.post(this.GLOBALURL + '/reports/query', params, this.httpOptions1);
}

Answer 3

您不需要对 observable 使用async/await 。 如果你想在响应到来后执行另一个函数，只需在属性分配后在你的订阅中执行它，就像这样：

.subscribe((response: any) => {
    this.firstResponse = response;
    this.fetchSalesByDay2();
});

您可以删除所有async/await 。