JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
  <div id='result'></div>
</body>
</html>

JavaScript

const tokenGenerator ={
getTokenPromise: null,
token: null,
called: 0,
generated: 0,
getToken(){
    this.called++;
    if (!this.getTokenPromise){
      this.getTokenPromise = new Promise(resolve=>{
    	this.generated ++;
      /*supposed to be a http request*/
      setTimeout(()=>{
      this.token = 'generated';
      	 resolve(this.token);
     },0) 
    }).then(this.clearPromise);
  }
  return this.getTokenPromise;
},
clearPromise(){
 this.getTokenPromise =null;
}
}

setTimeout(()=>tokenGenerator.getToken().then(res => {
        /*add the token to the header*/
       console.log('first:'+res);
      }), 0);
setTimeout(()=>tokenGenerator.getToken().then(res => {
        /*add the token to the header*/
       console.log('second:'+res);
      }), 0);
setTimeout(()=>tokenGenerator.getToken().then(res => {
        /*add the token to the header*/
       console.log('third:'+res);
      }), 0);
setTimeout(()=>document.getElementById('result').innerHTML = `called ${tokenGenerator.called}</br>generated ${tokenGenerator.generated}`,0);