Asynchronous Functions

There's a way in which we can create functions that wait for certain things to happen.

Async/Await

• Async identifies
• Await waits
• Promises

One of the things that used to be real difficult with functions is guaranteing that they ran only when something else happened. That has been simplified by allowing two special keywords called Async and Await.

Adding the Async keyword to a function identifies that function as something that has the capacity to handle this feature.

The keyword await defines a spot that stops the execution of a function until something else happens.

These functions work when what's controlling the flow happen to be something called a promise.

Async

async function doIt() {
    return console.log("I'm doing it");
}
doIt().then( item => {
  console.log('Glad you did it!')  
})

The Async keywork lets you define a function as being asynchronous. Something that can manage time.

An Async function like this will return a promise.

So we can call it and do something when that function resolves as being complete.

Await

async function prep() {
    return console.log('Preparing')
}
async function doIt() {
    await prep()
    return console.log("I'm doing it")
}
doIt();

The other part of defining an async function is that we can use await with it...stopping the execution of code until something else takes place.

The thing you're waiting for needs to return some type of promise, so you can see here that we've created a prep function that's also an asynchronous function.

Error Handling

async function prep() {
  	throw new Error("Not Possible");
}
async function doIt() {
  try {
    await prep()
    console.log("I'm doing it")
  } catch(error) {
    console.log(error)
  }
}
doIt();

So, what happens if there is an error?

You can use the try/catch statements to take care of any errors.

Here, I'm throwing an error on purpose, but promises have a system for sending errors if something you're doing is not working.

Fetching

async function getSocial() {
    const res = await fetch('./social.json')
    const data = await res.json();
    return data;
}

Try It

More Info

A good example of something you will use async and await for is the fetch API. Fetch is a function that returns a promise and reads some data either from a file or an external source.

It's perfect because retrieving data is often something that requires you to make sure you don't start doing things before that function is done.

As a matter of fact, reading the file is not enough, you also need to be able to wait for the data to be read and them convert that data into a javaScript Object from a JSON file.

Let's take a look at how that works.

As I said, to really understand how Async and Await works, it's a good idea to understand both the try/catch statements as well as promises, which are the precursor to these statements.

If you want to learn more about those, check out my other course JavaScript as a Second Language where I cover those in a lot more detail.