为什么 async/await 在服务器调用时中断？

Question

I am trying to implement async/await with server call. However, the async function doesn't wait for the await ed function to get resolved. Below is the code i have written.

index.ts

async verifyOtp(){
    this.invalidOtpLength=false;
    this.invalidOtp=false;
    if(this.otp.length < 6){
      this.invalidOtpLength=true;
    }else if(this.otp.length==6 && this.otp !=this.otpFromServer){
      this.invalidOtp=true;
      this.invalidOtpLength=false;

      //decrease the no of attempts by 1
      if(this.otpAttemptsRemaining>1){this.otpAttemptsRemaining-=1}
        else{document.getElementById('otpMaxAttemptsPopupButton').click()}
    }else{
      console.log("Before promise")
      await this.getDetailsForPanAndAadhaar();
      console.log("After promise")
      this.wizard.navigation.goToNextStep();
      console.log("Aadhar values: ", this.aadharValues);
      console.log("PAN values: ", this.panValues);
    }
  }


getDetailsForPanAndAadhaar(){
    return new Promise((resolve) =>{
      let obj={};
      obj['serviceName']='ePanDetlService'
      obj['aadhaarNum']=this.aadharNumber.value.replace(/\s/g, '');
      obj['uidaiDetailsFlag']='Y';
      obj['otp']=this.otp;
      this.http.put('http://localhost:8080/servicesapi/updateEntity', obj).subscribe((data) =>{
          console.log("Initial data ", data);
          let aadharRegex=new RegExp(/^aadhaar./);
          let panRegex=new RegExp(/^pan./);
          delete data['header'];
          delete data['messages'];
          console.log("New data: ", data);
          for(let key in data){
            if(key.match(aadharRegex)){
              this.aadharValues[key]=data[key];
            }else if(key.match(panRegex)){
              this.panValues[key]=data[key];
            }
          }
        })
        resolve(null);
    })
  }

In the above code when the getDetailsForPanAndAadhaar() function is implemented as it is, in the console, the statements Before Promise and After Promise are displayed before the promise gets resolved (the data is consoled after the two statements).

However, on changing the implementation of getDetailsForPanAndAadhaar() as below, the code works fine.

changed getDetailsForPanAndAadhaar()

getDetailsForPanAndAadhaar(){
  return new Promise((resolve) =>{
    setTimeout(() =>{
      console.log("Inside promise")
      resolve("High Time....");
    }, 5000);
})

I also tried changing the resolve statement from resolve(null) to resolve(this.aadharValues) but it still doesn't work. What am i doing wrong here?

Answer 1

You are calling resolve(null); without waiting for this.http.put(...) to finish. It might all work if you resolve the promise after the for loop finishes.