title: How to make an async then?
body: <p>Basically I am trying to play around to understand more of <code>async/await</code> and <code>promise</code> in <code>JS</code>. I'm trying to make <strong>Hello</strong> comes in between <strong>finished!</strong> and <strong>third finish!!</strong>. So the best guess is, making second <code>then</code> asnyc and await for <code>console.log('Hello')</code>. I've tried both ways below but both are not working as expected.</p>
  
  <p><strong>Approach A</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let promise = new Promise((res,rej)=&gt;{
    res();
  });
  
  promise.then(() =&gt; {
    console.log('finished!')
  }).then(() =&gt; {
    setTimeout(async function(){     
      await console.log("Hello"); }, 3000); //async/await at setTimeout level
  }).then(() =&gt; {
    console.log('third finish!!')
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Approach B:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let promise = new Promise((res,rej)=&gt;{
        res();
      });
  
      promise.then(() =&gt; {
        console.log('finished!')
      }).then(async () =&gt; { //async/await at thenlevel
        await setTimeout(function(){     
          console.log("Hello"); }, 3000); 
      }).then(() =&gt; {
        console.log('third finish!!')
      })</code></pre>
  </div>
  </div>
  </p>