What the execution order of asynchronous functions if there are multiple in one thread?

Question

I am learning the concept of asynchronous functions in JavaScript. I know JavaScript is single threaded and call back functions are put behind the synchronous executable code in the thread. This article explained pretty good. https://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/

But the article did not explain one questions I have, what if there are multiple call back functions in the code? For example, the below code, what is the order of execution? Is async function 1 or async function 2 executed first?

var request = require('request');

// async function 1: take 200ms
request('http://sohamkamani.com', function (error, response, body) {
  console.log(body);
})

// async function 2: take 100ms
request('http://facebook.com', function (error, response, body) {
  console.log(body);
})

console.log('I come after the request');

Answer 1

Based on how you've described your events, here is approximately how things will happen. The important concepts here involve async handing, the call stack, and the event queue.

1. Your script, we'll call it main.js, will be added to the call stack. Your call stack now looks like this:

   • main.js

2. main.js begins being executed. The first line is added to the call stack. Your call stack now looks like this:

   • request('http://sohamkamani.com', ... )
   • main.js

3. The request is executed and will be tracked for whenever the callback is resolved. Since there's nothing else to do here, it's removed from the call stack. So your call stack now looks like this:

   • main.js

4. The next line in main.js is added to the call stack.

   • request("http://facebook.com", ... )
   • main.js

5. Again, the request is executed and will be tracked for whenever the callback is resolved. It is removed from the call stack.

   • main.js

6. The next line is added to the call stack

   • console.log('I come after the request');
   • main.js

7. This can be executed immediately and the request is sent to your console to log this sentence. Your call stack now looks like this:

   • main.js

8. main.js is done, it can be removed from the call stack. Your call stack is now empty.

9. The facebook request resolved after 100ms. The callback function function (error, response, body) { ... } is added to the event queue. Things in the event queue can only be executed after the call stack is clear.

10. Your call stack is clear! The facebook callback function is added to the call stack and is executed. The console log is sent. The callback function is removed from the call stack.

11. After 200ms, the sohamkamani.com resolves and its callback function is sent to the event queue. Your call stack is clear! The callback function is added to the call stack, executed, and removed from the call stack.

Answer 2

The requests will be started in the order you coded them. The request to http://sohamkamani.com will be sent, then the request to http://facebook.com. But you can't know the order of the callbacks because they will only execute once the server responds and you don't know when that is.

The only thing you know for sure regarding the output of your code is that I come after the request will be the first thing to be written to the console, which will happen after both requests have been sent but before their callbacks execute.