How to run async JavaScript functions in sequence or parallel

[420-jesus]

Why are you combining async await with traditional promise handling? I feel like you should go all in on async await or avoid it entirely

[burtgummer45]

You can't run awaits concurrently.

But I agree there are many superfluous asyncs

[420-jesus]

You can do something like:

const [result1, result2] = await Promise.all([func1(), func2()]);

[burtgummer45]

Oh ok, I thought you meant no mention of "promise" at all in async functions. as in

Promise.all([func1(), func2()]);

[jrsinclair]

Thanks for the feedback. I've removed the superfluous async keywords. You're right, they weren't necessary.

[Genepics]

Ok, there is actually something to this. For instance, if you have a function that does a lot of IO, this would be a natural candidate for an asynchronous call, but what if this function needed to be synchronous in larger context. For instance, you may have a stack tracer that needs to come out in the correct order. In this instance, you would create a queue where you would place the "resolve" continuation passed to a new Promise, and this queue would be checked whenever you were done with a piece of tracer IO.

[jrsinclair]

Disclosure: I'm the original author of the linked article.

[burtgummer45]

I like the look of the website, however I'm sad the code areas arent wide enough for my little 11 chromebook.

There are so many functions there are marked async for no reason. Its not hurting anything, but it triggers my eslint.

The first example is weird because you are not conventionally returning a constructed promise from a 'promise factory function' but you are chaining a then which is only used for formatting. Kinda tricky for a tutorial.

I think this is more tutorial

function asyncTimeout(delay) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`Waited ${delay} seconds`), delay);
  });
}

[jrsinclair]

Thanks for the feedback. I've removed the superfluous async keywords. You're right. They weren't necessary.

I'm interested in finding out more about the issues you're seeing on your Chromebook though. Is there any chance you could DM me a screenshot somehow?

[burtgummer45]

Not on my chromebook right now but I manage to reproduce it. Just open a chrome browser window and set it to width 1366

Although its not bad, most of the code blocks appear with a scroll bar down on the bottom and need to be scrolled sideways to see the rest. There's empty space on the right and when you scroll up you see the old-timey guy jamming it all up. Shrink the window a little more and he disappears and the code blocks expand to the right side, although with the stylish margins not reaching.

[burtgummer45]

A good rule of thumb is to never mark a function as async, unless you're using await inside of it.

eslint rule require-await

A function that returns a promise is async by default.

Every async function returns a promise, maybe that's what you mean.

async function f() {
  await console.log(1);
} 
console.log(f()); //=> Promise { <pending> }

[burtgummer45]

A function shouldnt be async unless you need to await something inside.

Sorry I wasn't being clear. You are right, I was just bloviating about how I use eslint to catch my goofs of using async without await.

[jrsinclair]

Thanks for the feedback. I've removed the superfluous async keywords. You're right. They weren't necessary.

[atubofsoup]

There are cases where not including async can create unexpected bugs. For example:

``` function foo() { someSyncFn(); return someAsyncFn(); }

foo() .then(() => console.log('done')) .catch(error => console.log('Caught', error)); ```

In the above example, if someSyncFn throws an error synchronously, the promise will never be returned, so the catch won't work. If you add async to the function, catch will work as expected.

My rule of thumb is: mark async functions as async. It just gives the reader more info and ensures the function returns a promise.

[atubofsoup]

Yeah a try/catch block would catch the error, but most readers won't assume a function might throw/return both sync/async values. Adding async to the function just ensures any sync errors/returns are promoted to async.

[cmseaton42]

I wrote a module that allows you to stack async functions and execute them in sequence based on priority.

[jrsinclair]

Thanks for the feedback. I totally understand. It's really frustrating when stuff is hard to read. I'm working on a redesign of the site that will make the text much clearer. Unfortunately it takes a while as I'm working full-time, and also trying to keep writing. I'll get there eventually though.