Javascript. Order of execution of asynchronous functions

Question

Just now I had a discussion with my team-lead, and I have some doubts about his words, looking for professionals' help.

For example, we have three async functions

const fetchViewers = async () => { 
   const viewers = await fetch(...);
   this.setState({ viewers });
};
const fetchPolls = async () => {
   const polls = await fetch(...);
   this.setState({ polls });
};
const fetchRegistrants = async () => {
   const registrants = await fetch(...);
   this.setState({ registrants })
};

And we are invoking them in such order

const init = () => {
   fetchViewers();
   fetchPolls();
   fetchRegistrants();
}

And let's say that fetching viewers takes far more time than two others, my question, is there any reason to put fetchViewers last? Since we are not waiting for them to be resolved in the init function, I'm pretty sure that it doesn't matter because it only affects the order it will be put in the stack, and the calls will be made by the DOM. If it does matter, please explain more detailed why.

Yes, it won't matter.. But I do hope your not using the functions like that init is showing, you have lost all error checking and the ability to know when init is finished. At least place in a Promise.all.. — Keith
– Keith, Commented Jun 18, 2020 at 14:47
Since you are not expecting anything from all those requests, the order does not matter. If you are expecting some data, it matters. You can do it this way to have them in some order: const viewers = await fetchViewers() for every function with different const and ofc make the init async function. — Nicolae Maties
– Nicolae Maties, Commented Jun 18, 2020 at 14:50
IMHO, in async functions, you should not rely on the order - it should be concurrent. Implementation will have some order though; for example, the first function will mostly likely be the first to queue up. (This is my limited understanding.) — Nishant
– Nishant, Commented Jun 18, 2020 at 14:54

Jonas Wilms · Accepted Answer · 2020-06-18 15:03:07Z

2

Asynchronous functions still run synchronously till the first await. Therefore if you do some long running preparations before the actual asynchronous action, the order does matter. Also if the asynchronous task is accessing a shared ressource (e.g. they are locking the same database, for example) the order could influence how well the tasks can run in parallel (this is outside JS' scope though). In the case given however I can't really see synchronous code / a shared ressource (except for bandwith, but that should hardly matter), so it should not matter. To give an absolute answer, shuffle the calls (6 combinations, so that's not that much work) and measure it.

edited Jun 18, 2020 at 15:03

answered Jun 18, 2020 at 14:54

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Keith Over a year ago

Still wont matter though, because all those fetch initial init is also going to be synchronous, there is no event tick happening between any of them for any async actions to trigger. So all before first await code is going to get run first.

Jonas Wilms Over a year ago

Yes, but fetching could start while the synchronous code still runs. Yes, usually thats nanoseconds, but it could matter.

GlooMpiQue Web Over a year ago

if I would call all three of them with await key, then yes, they would be dependent, but in this case, we just call them synchronously, and DOM API will just return the very first resolved and put it in the call stack.

Jonas Wilms Over a year ago

@glooMpiQue I rather meant something like for(let i = 0; i < 10000; i++) before the fetch, then it would make a difference.

Keith Over a year ago

Even then it doesn't seem to matter, the fetch doesn't start until all synchronous code is complete. Well that's what seems to happen in Chrome anyway,.. If I call an async function, then do a long waiting blocking op, the fetch doesn't start until all blocking code is complete. Unless Chromes debugger tools are also blocked,..

|

Collectives™ on Stack Overflow

Javascript. Order of execution of asynchronous functions

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related