Async/Await in Javascript
Tags: javascript, async, await, promises
Published: 2023-03-21 23:18:49

Reading codebases and seeing async/await in functions may look a little tricky. With this article, you will see how they work and notice that it is a clever, easier way to work with asynchronous functions. 

## Prerequisites 📝

1. A working knowledge of promises (I will give a quick refresher, if you do not remember!) 
2. A working knowledge of try/catch 
3. A code editor (I recommend [Visual Studio Code](https://visualstudio.microsoft.com/))

## Let's Get Started ✨


**First, let's breakdown the _async_ keyword**

When you see the async keyword before a function, this means that the function is going to return a promise. (here's the refresher!!!) A promise, in simple terms, is an object that contains the results of the eventual completion or failure of an asynchronous operation. Let's see it in action, 

```javascript
async function brewCoffee() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("coffee is done! enjoy :)"), 2000)
  });

  try {
    let coffee = await promise;
    console.log(coffee);
  } catch(error) {
    console.log('error', error);
  }
}

brewCoffee();

//output: coffee is done! enjoy :)
```

The function `brewCoffee` starts with a promise that will resolve after 2 seconds. That promise will be assigned to the variable `coffee` which will be printed out. If the promise is rejected, the error will be printed out in the catch.

**How does _await_ play a role?**

The `await` keyword will pause the execution of the function so the promise can resolve.

**How they both work together**

The `await` keyword is declared in the `async` function. Often, you will see `async/await` in API calls. This will make sure the data is correctly fetched before other lines of code are called. For example,

```javascript
async function fetchCappiccunoRecipe() {
  const response = await fetch('https://api.sampleapis.com/coffee/hot');
  const recipe = await response.json();
  return recipe; 
}

function makeCoffee(recipe) {
  console.log('The coffee was made with this ', recipe);
}

async function barista() {
  const recipe = await fetchCappiccunoRecipe();
  makeCoffee(recipe); 
}

barista();
```
When the `barista` function is called, the recipe will be fetched which will be passed in as a parameter in the `makeCoffee` function.

## Key Takeaways ✨

`async/await` will make your code easier to work with, especially since it makes it more readable. It is also a more concise way of writing asynchronous functions. Alternatively, it could have been written like this, 

```javascript
function fetchCappiccunoRecipe() {
  return fetch('https://api.sampleapis.com/coffee/hot');
}

function makeCoffee(recipe) {
  console.log('The coffee was made with this ', recipe);
}

function barista() {
  fetchCappiccunoRecipe().then((response) => {
    response.json().then((recipe) => {
      makeCoffee(recipe); 
    });
  });
}

barista();
```
You can see that there is more nesting and callback functions. Overall, a more confusing experience. 

## Next Steps ✨

There may be opportunities in your code base to refactor functions to use `async/await`. I recommend this article on migrating promises into `async/await` functions: https://afteracademy.com/blog/migrating-from-promise-chains-to-async-await/ if you need additional guidance! Thanks for reading and happy coding :)