Learn Asynchronous Programming - JavaScript Tutorial

You can access the full course here: Intermediate JavaScript – Build a Dynamic Data Table

Table of contents

Asynchronous Programming with Async Await

In this lesson, we’ll see how to do asynchronous programming with async/await.

An async function is a function declared using the ‘async‘ keyword, with ‘await‘ used within it to make the code stop and wait for the function being called to finish before proceeding to the next line:

async function myAsyncFunction(){

const response = await fetch(‘http://localhost/myfile.json’);

let json = await response.json();

}

Here in this example, we’re loading in a JSON file to our const ‘response‘. Once the fetching is done then we continue by parsing its contents to an object that we store in the ‘json‘ variable.

Note that the await keyword can only be used inside an async function.

Promises vs Async Await

In this lesson, we’ll compare the differences between promises and async/await.

The main differences we can notice between the two approaches are:

Async functions do not have states like promises, they simply return a success or failure;
Async has cleaner error handling (which we’ll see in the next lesson);
You can’t chain async functions as you could with promises;
Chaining multiple promises can become complex to deal with.

As such, we’re going to use async functions for the rest of the course.

Error Handling in Async

In this lesson, we’ll learn how to handle errors in JavaScript.

The easiest way to do error handling is by using try catch blocks as they are statements that specify how to handle exceptions when thrown.

Let’s take a look at how they work in practice:

async function myAsyncFunction(){

try {

const response = await fetch(‘http://localhost/myfile.json’);

let json = await response.json();

} catch (err){

console.log(err);

}

By wrapping up our code in a try catch block, we’re telling the browser to try to load in the specified JSON file for us, and if it can’t do it then it should simply log the error in the console. Additionally, we could also show a message to the user explaining that an error occurred without displaying the actual whole error stream to them unnecessarily.

Try catch blocks handle pretty much any exception that may occur and thus work pretty well with asynchronous functions as we never know when an error can happen.

Transcript

Asynchronous Programming with Async Await

Hello and welcome back to the next video in this course. And in this video, we’ll be taking a look at asynchronous programming with the async and await keywords.

So what is async and await? An async function is a function declared using the async keyword, and await is used within them. So what that means is that we have to have the two keywords together.

As we can see in this example, before the function key, we use the async keyword, and then somewhere throughout the function, we have to do an await, we have to have the two together.

And what we’re doing in this function is that to our variable response that we’ve made, we are loading in a JSON file, and then what we’re doing is we are adding this, create another variable later on using the let keyword again to load the response, the JSON of our response, into another variable.

Really, you can kinda see, we’re doing the same thing that we did with promises, but this is, in the way I look at it, this is a lot more cleaner.

Now, the next video, we’ll take a look at the differences between promises and async and await, and then we’ll decide which one we’re gonna use for this course. See you then.

Promises vs Async Await

Hello and welcome back. This video, we’re gonna be comparing the two asynchronous options that we’ve looked at so far in JavaScript in the Promises versus Async and Await.

So what is the differences between the two? Technically async and await function is the same thing as a Promise. It’s just done a lot cleaner and you can’t chain them like you can, in the same sense as you do the Promise chaining with next and such.

Async functions do not have states like Promises do either. They either return success or failure. There’s not different states, again, like Promises have.

Async has a much cleaner error handling that we will look at in the next video. And Promises, as you start chaining them, they can really become messy. Again, async and await, is just so much easier to use and easier to maintain.

So because of that, for the rest of the course, when we do asynchronous programming, it will be using the async and the await function. And in the next video, we will take a look at how we can do error handling for async and await.

Error Handling in Async

Hello, and welcome back. And I promise you, this will be our last theory video that we have. The next video, we’ll start getting into, into the code and start writing it. But before we get to that, we have to just look at one more topic.

And that is how we will do our error handling with Async. And the easiest way that we can do error handling is what’s called a try catch block. Try catch blocks are statements that they kind of tell the browser, the JavaScript partial or whatever you want to call it, how to handle exceptions when they occur.

And let’s take a look at what I mean by that. Here this is the rehash of our function that we looked at in the Async and await video. And all I’ve done is I’ve added this try and catch to it.

And what happens is that it will, we’re telling the browser to try to do what we’re doing right here. Try to load in this JSON file for us. However, if you can’t do it, you know, don’t display the massive error to the user.

Let’s put our, put the error into the console. And then what we could do here is we could put a nice little message to the user. Hey, you know, an error has occurred or whatever, instead of just bombarding them with a you know, just massive error stream.

So this try catch block really comes in handy with an asynchronous function. Cause you never know what could happen. You know, the user’s internet could go out.

There could be changes to your server that you’re not aware of, and you can lose a file or, you know, any number of things could happen. And try catch allows us to handle pretty much anything that we can think of gracefully.

So, as I said, this is our last theory video. In the next video, we will begin creating our json file for the project, with all the cards that we’re going to use. And the from here on out, we’ll be writing some code. See ya then.

Interested in continuing? Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!