DEV Community

Cover image for Async First!
John Peters
John Peters

Posted on • Updated on


Async First!

Async First?
Apart from learning async/await in C#, Node was the first JavaScript Async first framework that I encountered. If Node did it, then shouldn't we?

Converting to Async

Once we decide to convert our traditional Synchronous Components into Asynchronous components, we start to notice a few odd things. One of them is that single stepping to a line of code with an "await" will surprise us.

Anytime an "await" is seen it "yields" control to the async engine to do its thing. It most likely will not hit the next statement right away. Solution: Put in more breakpoints, just before and after "await" statements.

Pervasive throughout the Code Stack

Making our Functions Async tends to have a ripple effect upwards in the stack. Any async function requires the caller to "await" return, this means the caller must be asynchronous too. This often ripples up until perhaps maybe the entire stack becomes async.

Mixing Synchronous and Asynchronous

Yes it can be done but the recommendation is just be careful. For example, even event handlers themselves should become async.

// Before
   //do some synchronous work here

// After, browser gets control back immediately

async onButtonClicked(event){
  await doSomeWork();
Enter fullscreen mode Exit fullscreen mode

Lambda Conversion

// before>{ //do work here});
// after>{
   await workWithItem(item);

// using Promise resolve>{
  let newData = workWithItem(item)
  await Promise.resolve(newData);
Enter fullscreen mode Exit fullscreen mode


But just firing off Async requests may lead us to dependency trouble. If we encounter any dependencies along the way, we need to implement an Asynchronous closure.

 // this is a closure on result.
 let result = await getSomething(1);
// result must be complete before this statement
 let result2 = await getSomething(2);
Enter fullscreen mode Exit fullscreen mode

Integrate with Promises

async function getPromise(){
  return await getSomethingThatReturnsOnlyPromises();   
Enter fullscreen mode Exit fullscreen mode

Awareness of the Team
When a team first looks at Async first they will be confused. It's not the same as Synchronous style programming. Be prepared to answer a few questions and to even roll back changes if the team leader doesn't go for it. They may not know it now but getting to all Async is a good design.

JWP2020 Async First

Top comments (1)

negue profile image

If you only have one await , and don't do anything after that await, you can just omit async / await inside the method.

then it would look like this:

function getPromise(){
  // stuff before
  const neededSomething = 42;
  return getSomethingThatReturnsOnlyPromises(neededSomething);   

// the method that uses  getPromise

const something = await getPromise();

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git