Better Then Promises

Hi everyone! Last week I wrote about the differences between synchronous and asynchronous programming. Today I’m going to demonstrate writing asynchronous code using “async-await” keywords.

“Async-await” is syntactical sugar wrapped around making promises easier to work with.

Let’s look at the code we have here

function makeRequest(location) {
  return new Promise((resolve, reject) => {
    console.log("Making request to ${location}")
    if (location === "Google"){
      resolve ("Google says hi")
    } else {
      reject ("We can only talk to Google")
    }
  )}
}
function processRequest(response) {
  return new Promise((resolve, reject) => {
    console.log("Processing response")
    resolve ("Extra information + ${response}")
  }
}

We have two functions here. The first function returns a promise that will just log “Making request to ${location}” and will resolve successfully if you pass in the location of “Google”, or reject if you don’t.

Our second function is a simple request that adds extra information onto the string that you pass it and it will always resolve.

Let’s look at how we would call these functions using promises and then we are going to take that code and change it to use “async-await” and see all the advantages and disadvantages of doing so.

Let’s call the makeRequest() function and pass it in “Google” because we know that it will make it succeed and log “Response received”, and then we’ll call our processRequest() function inside this function which is going to process the response that we get from the request. And since we are using promises, it is important to use the “return” keyword to be able to use it in our chained event where we are just going to log the response

makeRequest("Google").then(response => {
  console.log("Response received")
  return processRequest(response)
}).then(processedResponse => {
  console.log(processedResponse)
}).catch(error => {
  console.log(error)
})

Here is what we get in the console,

Making request to Google
Response received
Processing response
Extra information + Google says hi

which means that all of our code is executed in order just like it should and it’s waiting for the previous code to execute before going on to the rest of the code which is exactly what we want.

If we pass our makeRequest() function the string of “Facebook” this is what is going to be logged in the console, as expected

Making request to Facebook
We can only talk to Google

If we look at our code it’s not bad, but we could make it a lot easier to read by getting rid of all the .thens and the nesting inside them.

Now let’s refactor our code using “async-await”. Something you need to know about “async-await” is that you need to have some function that you are awaiting code inside of. To tell JavaScript that the function is asynchronous we need to use the word “async” at the beginning of the function so it knows how to handle the “await” inside of it

async function doWork() {
  const response = await makeRequest("Google")
  console.log("Response received")
  const processedResponse = await processRequest(response)
  console.log(processedResponse)
}

Because we have our code inside an asynchronous function, once JavaScript hits the await statement it will leave the function, do other work inside of the program, and as soon as the makeRequest() function finishes executing it will come back there, return the resolve into the response variable. Afterwards we have to pass our response to the processResponse() function and console log the result. All we have to do now is remove all previous asynchronous code and call our doWork() function. Here is what we get in the console

Making request to Google
Response received
Processing response
Extra information + Google says hi

So the doWork() function works exactly the same as our promises but it looks a lot neater. The biggest think that you have to make sure you do when you use “async-await” is that you must wrap your code inside of a function with the async keyword at the beginning.

I hope you enjoyed reading my post! Happy coding!