async-await example vs promise

promise-async-await-example.js

/* in both cases, wire the `handleSubmit` FN in the html.form onSubmit event
<form onSubmit={this.handleSubmit}>
 <input old pwd
 <input new pwd
 <input confirm pwd
 <button etc
</form>
*/

//ALT #1: use Promise.then().catch() syntax
handleSubmit = (event) => {
  event.preventDefault();

  console.log('PwdChange submitted ...at:', getNowDt());
  this.setState({ 
    isLoading       : true,      //spinner-ON
    LoginErrorText  : ''         //pending outcome...
  });

  const C_DELAY = 3000; //3 secs
  let prom = new Promise(function (fulfillCallback, rejectCallback) {
    console.log('newPwd:',this.state.newPwd)
    console.log('confirmPwd:', this.state.confirmNewPwd)
    
    if (this.state.newPwd != this.state.confirmNewPwd) {
        setTimeout(() => {
          rejectCallback(false); //REJECT requires a catch in the promise caller; 
          //ALT. we could write the promise with 1 parm only - fullfillCallback(true|false) //AND OMMIT 2nd param rejectCallback
        }, C_DELAY);
        
    } else {
      setTimeout(() => {
        fulfillCallback(true);
      }, C_DELAY);
    }
        
  }.bind(this)); //pass outer `this` into Promise
  console.warn('AFTER promise call... Pending resolution ...at:', getNowDt())

  prom.then ( (result) => {
    console.warn('Promise resolved (fulfill) ...at:', getNowDt())
    console.log('result:', result)
    console.log('Continue... call server-side if client-side new pwd confirmation ok')
    //todo put additional code here... etc...
   
  }).catch( (result) => {
    console.warn('Promise resolved (reject) ...at:', getNowDt())
    console.error('result:', result)
    console.error('passwords did not match.')
   
    this.setState({
      LoginErrorText  : 'The passwords you entered did not match',
      isLoading       : false,  //stop spinning... exit
    })
  })

}


//ALT #2: use async/await syntax
 handleSubmit = async event => {
    event.preventDefault();

    console.log('PwdChange submitted ...at:', getNowDt());
    this.setState({ 
      isLoading       : true,      //spinner-ON
      LoginErrorText  : ''         //pending outcome...
    });

    //validate client-Side Pwd-confirmation
    
    //currentPwd|newPwd|confirmNewPwd
    console.warn('BEFORE promise call ...at:', getNowDt())

    const C_DELAY = 3000; //3 secs
    let prom = new Promise(function (fulfillCallback, rejectCallback) {
      console.log('newPwd:',this.state.newPwd)
      console.log('confirmPwd:', this.state.confirmNewPwd)
      
      if (this.state.newPwd != this.state.confirmNewPwd) {
          setTimeout(() => {
            rejectCallback(false); //REJECT requires a catch in the promise caller; 
            //ALT. we could write the promise with 1 parm only - fullfillCallback(true|false) //AND OMMIT 2nd param rejectCallback
          }, C_DELAY);
          
      } else {
        setTimeout(() => {
          fulfillCallback(true);
        }, C_DELAY);
      }
          
    }.bind(this)); //pass outer `this` into Promise
  

    let result;

    try {
      console.warn('BEFORE promise call... and Await result ...at:', getNowDt()),
       result = await prom; //in effect, the await initiates the promise call, and awaits result (makes code appear sync)
       console.warn('AFTER promise resolved (fulfill) ...at:', getNowDt()),
       console.log(result); //continue other code below...
    } catch (err) {
      console.warn('AFTER promise resolved (reject) ...at:', getNowDt()),
      console.error(err);
     
      this.setState({
        LoginErrorText  : 'The passwords you entered did not match',
        isLoading       : false,      //stop spinning... exit
      })
     
      return; //dont bother continue below...
    }
  }