Event loop flow with Async/Await

Question

I have been experimenting with Async/Await commands in Javascript and noticed something I'm confused about.

When I run the following code in Visual Studio Code in debug mode, after I get to the first 'await' line of code it jumps to the end of the function and then continues sequentially through the rest of the code including other 'await' lines. Why is this?

const axios = require("axios");
const apiURL = 'https://jsonplaceholder.typicode.com/posts/1'

async function multipleRequestsAsync() {
  try {
    console.log("starting...")
    const response1 = await axios.get(apiURL);
    console.log(response1.data);
    const response2 = await axios.get(apiURL);
    console.log(response2.data);
    const response3 = await axios.get(apiURL);
    console.log(response3.data);
  } catch (error) {
    console.error(error);
  }
}

multipleRequestsAsync();

Here is the code in jsfiddle.

Here is an animated gif of what I'm talking about.

Answer 1

It probably signifies the point at which the function returns the promise. If you include some other code after the call to your async function, that would be stepped through before the execution continues after the await in a future turn of the event loop. Consider

async function multipleRequestsAsync() {
  try {
    console.log("starting...");                // 3
    const response1 = await axios.get(apiURL); // 4
    console.log("done");                       // 7
  } catch (error) {
    console.error(error);
  }
}                                              // 5

console.log("before start");                   // 1
const promise = multipleRequestsAsync();       // 2
console.log("continuing...");                  // 6

You'd get the output

before start
starting...
continuing
// later:
done

The breakpoint at the end of the function (5) would occur between leaving the function at await (4) and the statement after the call (6).