← back to the blog


JavaScript Async function and Await

Posted on April 26th, 2019 by George

 

One way of doing asynchronous programming is by using a callback function. The asynchronous action will start and when is done the callback function is called with the resulted value. The problem with the callback style is that it makes it very hard to make sure that failures are properly reported and handled by callbacks.  While this does the job, with programming evolving conspicuous, there was an increasing need for a better approach. The answer being Promises. Async/await is a way of implementing Promises into javascript function to be able to do asynchronous programming that looks synchronous.

 

Here is an example of how async function works and how to polyfill using the standard Promise object:

 

// Async / Await implementation 

async function someFetchUtility(url) {
  let data;
  try {
    data = await getDataHttpGetRequest(url); 
  } catch(e) {
   data = handleRejectionError(e);
    //or do more async stuff using await
  }
  return executeNextStep(data);
}


// Standard Promise implementation 

function someFetchUtility(url) {
  return getDataHttpGetRequest(url) // returns a promise
    .catch(e => {
      return handleRejectionError(e); 
    })
    .then(data => {
      return executeNextStep(data); // returns a promise
    });
}