0

I have a method that executes some callbacks after the promises are resolved:

setProfilePicture(url: string) {
  this.auth.currentUser
    .then((user) => {
      user.updateProfile({ photoURL: url })
        .then(() => {
          this.auth.currentUser
            .then(user => { this.setUser(user); })
        })
        .catch(function (error) { console.log(error) });
    });
}

This method is in a service and is being called from a component. I'm trying to wait for the entire setProfilePicture method to finish before executing the next lines of code in my component. What would be the simplest way to achieve this?

m0kova01
  • 149
  • 1
  • 12
  • 3
    Add `return` before every Promise you create so `setProfilePicture` returns a Promise that resolves at the desired time – CertainPerformance Apr 03 '22 at 00:05
  • @CertainPerformance Thank you, it worked! I'm just trying to wrap my head around why. If I'm understanding correctly, the first promise returns the result of the second promise which returns the result of the third promise? So the end result would be the very last return statement? – m0kova01 Apr 03 '22 at 00:17
  • 1
    Yes, that's how Promise chaining works – CertainPerformance Apr 03 '22 at 00:17
  • Thank you, didn't know that was a thing – m0kova01 Apr 03 '22 at 00:17

0 Answers0