Unscrambling JavaScript: Async Await

TL;DR - Async Await allows you to pause your script and wait for some code to resolve. This makes it ideal for fetching data from APIs or web scraping.

If you didn’t already know, JavaScript runs code synchronously (at the same time) - In a lot of instances this works just fine.

However, problems can occur when we need to request data from external resources such as APIs and the response time is not known.

A variable or function further down our code may rely on this data which would then be unable to resolve if the required data is not present at the time of execution.

So, if all of our code runs before the required response has been returned then our programme will likely error or crash. This is a great example of where we could use Async Await to solve the problem.

Async Await allows our code to run asynchronously (not at the same time) and ‘await’ the result before continuing; returning instead something known as a promise.

A promise is just a fancy way of saying ‘I owe you’ some data which I’m trying to get - wait here and I’ll let you know the outcome when I’m done.

Think of a promise as a placeholder for a value not yet known. Once the code has completed, It will either succeed or fail, which we can then handle with the appropriate action by either continuing with our code or catching the error.

In effect, Async Await allows us to pause the code and wait for data to resolve before moving on to the next piece of code. This makes things such as web scraping so much easier to handle, than if all the code ran at the same time.

There are a couple of rules to consider before using Async Await in our code, which we will explore in an example below:

The async keyword must be placed in front of your function declaration
The await keyword can only be used within the declared async function

A rudimentary example

Here is a simple example to show Async Await in action.

let fetchData = async function () {
    let res = await fetch('https://randomuser.me/api/');
    let data = await res.json();
    return data;
};

fetchData().then(console.log);

Let’s go over what we’ve just written here.

Notice the async keyword placed before the function declaration. This tells JavaScript that we want to make the code within the function asynchronous.

Next, within our variable assignment we prefix the await keyword to any value we need to wait for before proceeding.

As Async Await returns a promise, we need to resolve this when calling the function, so we append this with a .then and then console.log our result.

You now know the basics of Async Await. If you want to learn this in more depth there are many resources freely available online.

For example:

If you’re interested in web development or graphic design and want to connect, then check me out on Twitter - twitter.com/brandymedia