JS wait for a funtion until it receives data

Question

I'm always stuck when it come to acronyms methods, because of that I'm expriencing some issues with my code. Hope you guys can help me.

So basically, I have 2 funtions on the onInit; however, when "fetchSalesbyDay2" runs, the this.firstResponse is reciving undefined and not saving the first reponse from "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);
        });
}

I would like that, once "fetchSalesbyDay1" finishes, and this.firstResponse has already a value, the "fetchSalesbyDay2" can execute. What would be the best way to solve this ?

`this.fetchSalesbyDay1().then(() => this.fetchSalesbyDay2())` — Keith, Nov 02 '20 at 14:13
You would need to combine both responses using RxJs operators. If only the second response is important for your component, you could use mergeMap, if you would need both responses to process your data you should use something like combineLatest. Have a look [here](https://www.learnrxjs.io/learn-rxjs/operators) — Erbsenkoenig, Nov 02 '20 at 14:14
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, Nov 02 '20 at 14:20

score 1 · Answer 1 · answered Nov 02 '20 at 14:22

1

Without changing your code you can add await outside your fetch functions like this:

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

This way fetchSalesbyDay2() will wait for the first one to complete.

answered Nov 02 '20 at 14:22

Michael S. Molina

722
4
9

score 1 · Accepted Answer · answered Nov 02 '20 at 14:28

There's essentially no reason to convert the observables to promises. Observables provide better options to combine async data. In this specific case you could use RxJS forkJoin function to combine both the observables

Try the following

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

score 0 · Answer 3 · answered Nov 02 '20 at 14:13

You don't need to use async/await with observables. If you want to execute another function after response comes, just execute it inside your subscribe after property assignment, just like that:

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

And you can remove all async/await.

JS wait for a funtion until it receives data

3 Answers3