title: Why doesn't the code after await run right away? Isn't it supposed to be non-blocking?
body: <p>I have a hard time understanding how async and await works behind the scenes. I know we have promises which make our non blocking code by using the &quot;then&quot; function we can place all the work we need to do after the promise is resolved. and the work we want to do parallel to promise we just write it outside our then function. Hence the code becomes non blocking. However i don't understand how the <code>async</code> <code>await</code> makes non-blocking code.</p>
  <pre><code>async function myAsyncFunction() {
    try {
      let data = await myAPICall('https://jsonplaceholder.typicode.com/posts/1');
      // It will not run this line until it resolves await.
      let result = 2 + 2;
      return data;
    }catch (ex){
      return ex;
    }
  }
  </code></pre>
  <p>See the above code. I cannot move forward until the API call is resolved. If it makes my code blocking code, how is it any better then promises? Or is there something I missed about <code>async</code> and <code>await</code>? Where do i put my code that is not dependent to the await call? so it can keep on working without await holding the execution?</p>
  <p>I am adding a Promise code that i would like to replicate in an async await example.</p>
  <pre><code>function myPromiseAPI() {
    myAPICall('https://jsonplaceholder.typicode.com/posts/1')
      .then(function (data) {
          // data
      });
     // runs parallel
    let result = 2 + 2;
  }
  </code></pre>