How do I await for subscribe to subscribe

Question

I used the code below until I found out that the getConnectedUser() function takes longer than verifyUser(), so this.userUID is undefined:

this.layoutService.getConnectedUser().subscribe(

  (data) => {
    this.userSaml = data;
    this.layoutService.connectedUser.matricule = this.userSaml.matricule;
    this.layoutService.connectedUser.profil = this.userSaml.profil;
    this.layoutService.connectedUser.uid = this.userSaml.uid;
    this.layoutService.connectedUser.username = this.userSaml.username;
    this.layoutService.connectedUser.city = this.userSaml.city;
    console.log("dashboard this.layoutService.connectedUser", this.layoutService.connectedUser);
  },
  (err) => {
    throw err;
  }
);

      this.userUID = this.layoutService.connectedUser.uid;
      console.log("this.userUID", this.userUID);
      this.adminService.verifyUser(this.userUID).subscribe(
        (data) => {
          this.userStatus = data[0].status;
          this.userProfile = data[0].profil;
          console.log("userProfile" + JSON.stringify(data[0].profil));
          this.userExists = true;
        },
        (err) => {
          this.userExists = false;
        }
      );

So, I wanted to make sure that the getConnectedUser subscribe is completed to call the second one, I changed my code and added the.add method just like that:

this.layoutService.getConnectedUser().subscribe(

  (data) => {
    this.userExistsRefog = true;
    this.userSaml = data;
    this.layoutService.connectedUser.matricule = this.userSaml.matricule;
    this.layoutService.connectedUser.profil = this.userSaml.profil;
    this.layoutService.connectedUser.uid = this.userSaml.uid;
    this.layoutService.connectedUser.username = this.userSaml.username;
    this.layoutService.connectedUser.city = this.userSaml.city;
    console.log("home connectedUser", this.layoutService.connectedUser);
  },
  (err) => {
    this.userExistsRefog = false;
    throw err;
  }
).add(() => {
  this.userUID = this.layoutService.connectedUser.uid;
  console.log("this.userUID", this.userUID);
  this.adminService.verifyUser(this.userUID).subscribe(
    (data) => {
      this.userStatus = data[0].status;
      this.userProfile = data[0].profil;
      console.log("userProfile" + JSON.stringify(data[0].profil));
      this.userExists = true;
    },
    (err) => {
      this.userExists = false;
    }
  );
});

I want to learn how to use the Async/await way for this example and what is the best approach to adopt for similar functionality? Thanks

Answer 1

mainly you have two ways.

1.write the method call verifyuser() inside the subscription of getconnecteduser() method.in that way you will never get a null value. 2.you can use promises instead of observable subscription. then use async/await to delay the execution of the method.

async userTasks() {
  const usersDetails = await this.layoutService.getConnectedUser().toPromise();
  this.layoutService.connectedUser.uid = usersDetails.uid;
  this.adminService.verifyUser(this.userUID).subscribe(
    (data) => {
      this.userStatus = data[0].status;
      this.userProfile = data[0].profil;
      console.log("userProfile" + JSON.stringify(data[0].profil));
      this.userExists = true;
    },
    (err) => {
      this.userExists = false;
    }
  );
}