TypeScript nested asynchron functions

Question

profile.page.ts:

  username: string;
  totalScore: number;
  ...


  loadUserData() {
    this.spinnerDialog.show();
    this.firebaseServie.loadUserData().then(() => {
      this.username = this.sessionData.getUser().getUsername();
      this.totalScore = this.sessionData.getUser().getTotalScore();
       ....
    });

firebase.service.ts:

async loadUserData() {
    console.log(this.sessionData.getUser().getEmail());
    this.userCollection = this.afs.collection('users', ref => ref.where('email', '==', this.sessionData.getUser().getEmail().toLowerCase()));

    this.userDoc = this.afs.collection("users").doc(this.sessionData.getUser().getEmail().toLowerCase());

    this.x = this.userDoc.valueChanges().subscribe(((item: User) => {
      this.userLoadedUser = item;
      console.log("Found user by email id " + this.sessionData.getUser().getEmail() + ":" + this.userLoadedUser.username);
      this.sessionData.getUser().setUsername(this.userLoadedUser.username);
      this.sessionData.getUser().setTotalScore(this.userLoadedUser.totalScore);
      ....

    }));
  }

So how can I be sure that the part in the then() clause is only executed after we have the data from firebase?

I have edited my question for a better understanding.

NULLchimp · Accepted Answer · 2019-05-15 15:59:22Z

1

You could simply return a new Promise in your firebase.service.ts:

loadUserData() {
    return new Promise((resolve, reject) => {
        ...
        this.x = this.userDoc.valueChanges().subscribe(((item: User) => {
            ...
            resolve(); // If everything worked!
        }));
        ...
    });
}

I hope that helps!

answered May 15, 2019 at 15:59

NULLchimp

7854 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baao · Accepted Answer · 2019-05-15 15:17:00Z

1

Since subscribe indicates you're dealing with an observable, better don't start mixing with a promise, but simply use the observable and pipe

otherfunc()
    .pipe(map(myfunc))
    .subscribe((item:User) => {

});

If you really want the promise, you can convert the observable to a promise.

otherfunc().toPromise().then(myfunc).then(e => {
    // runs after
});

answered May 15, 2019 at 15:17

baao

73.5k18 gold badges152 silver badges209 bronze badges

4 Comments

farahm Over a year ago

what if the above function is on a page component and the below one is in a service?

baao Over a year ago

Simple call the Service method then. Doesn’t really matter where it is as long as it’s accessible

farahm Over a year ago

Yes, but .pipe(map(myfunc)) requires me to import the page-module into the service, which is not a good programming style. See on my profile.page.ts (angular) I have this.firebaseServie.loadUserData().then(() => { // here html field values are set and then I have my firebase.service.ts:

async loadUserData() { .... this.x = this.userDoc.valueChanges().pipe().subscribe(((item: User) => { // here I load the data from firebase

so only once the firebase data is loaded, the values of the html fields should be set. thats what i want

farahm Over a year ago

i have edited my question for a better understanding

Collectives™ on Stack Overflow

TypeScript nested asynchron functions

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related