Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

Optimised just now View

original
https://medium.com/javascript-in-plain-english/async-await-for-beginners-understanding-asynchronous-code-in-

Menu

Get one more story in your member preview when you

sign up. It’s free.

Sign up with Google

Sign up with Facebook

Already have an account? Sign in

Async/Await for Beginners—

Understanding Asynchronous Code
in Javascript
Konstantin Münster
Sep 21, 2019 · 5 min read

1 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

Being introduced in ES7, the Async / Await syntax finally

made it into JavaScript as a standard. But what’s so special
about it and why do we need it at all? As I am a beginner
myself, I struggled a lot with understanding and handling
asynchronous code in JavaScript in the past. Therefore, this
article should be an introduction to JavaScript’s problems
with asynchronous code and how Async / Await can help us in
solving them.

What is Asynchronous
Programming?
To truly understand why we need things like Async / Await,
we have to take a look at JavaScript’s core concepts. At its
base, JavaScript is a synchronous programming language.
This means it is single-threaded. Only one operation can be
executed at a time. I visualized in the following graphic why
this can lead to problems.

2 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

Synchronous and asynchronous execution in Javascript

By default, the code execution in JavaScript is synchronous.

This means that each operation blocks the following until it’s
done. Therefore, operations which typically take longer (e.g.
network requests) will block any further execution. This is
quite bad and will naturally lead to performance issues as you
can grasp from the graphic.

However, through features like the Event Loop, today’s

JavaScript found ways to execute code asynchronously. Thus,
it can perform operations seemingly concurrently and not
only sequentially.

As shown in the graphic, the asynchronous way of handling

operations is by starting them and then waiting for their
responses in the future. Thus, time in between can be used
for other operations. With this mechanism, long performing
operations are no longer blocking your code from further
execution.

The Problem of Asynchronous Execution

But… this asynchronous execution can cause problems too.

3 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

What if we, for instance, make a network request in line 1 and

continue working with the requested data in line 2? Since we
only started the network request in line 1, we can not be sure
that it is already resolved in line 2 — probably, we will get the
response way later. Therefore, the execution in line 2.

So, we need a way to declare if a piece of code is dependent

on some preceding asynchronous executed code. Speaking in
our example, we have to make sure that line 2 is only
executed once the response of the network request of line 1
has been received.

Understanding Async / Await

Now as you might guess: Async / Await solves exactly this
problem for us. But to be fair, it is not the first approach to
help us handling asynchronous code in JavaScript. In fact,
there have been two decent ways before: Callbacks and
Promises. However, since both have some downsides
regarding readability and code maintenance, with Async /
Await we now have a third option to handle asynchronous
code which is far easier to read and understand, especially for
beginners.

So, the main reason why the Async / Await method made its
way is that it makes asynchronous and synchronous code
more or less indistinguishable. That, in turn, brings a new
level of clarity and simplicity to handling asynchronous code
which wasn’t there before.

A simple Async / Await Example

But let’s see Async / Await in action now! In the example
below, we want to fetch some posts from an API. Since this
can be a long performing operation, it is handled
asynchronously by default. Hence, we somehow need to make
sure that the fetch call in line 3 has been successfully
resolved before we continue working with that fetched data in
line 4. Otherwise, the json method will fail since we don’t

4 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

have a response from the fetch call yet.

const fetchData = async (url) => {

try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch(error) {
// Handle errors as needed
}
}
fetchData("https://example.com/posts");

Understanding-Async-Await.js hosted with ❤ by GitHub view raw

With Async / Await we can ensure that easily. First, we

declare the fetchData function as an asynchronous function
by using the async keyword. By using this declaration,
JavaScript allows us to use the await keyword inside our
function. And this keyword really does the trick! Whenever it
occurs, JavaScript pauses the execution of our function until
the asynchronous call (e.g. our fetch call) has been resolved.
Once that is the case, it continues the execution. So the
procedure of line 3 is straightforward in our example:

We start the fetch call with the given URL

We wait until we receive its response and store it in the

variable

We continue with the next line of code

Then, we do the same thing for the json call in line 4 and
finally, we return the received data in line 5. It’s easy as that!

Error Handling with Try & Catch

Probably, you wondered why we have the Try and Catch
blocks in our example. Those are responsible for any error
handling we might want to implement. As you can imagine,
not every fetch call will resolve successfully. There might be
the case that the URL we want to request does not exist. In

5 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

such cases where we can not successfully resolve an

asynchronous call, the further execution would fail.
Therefore, we can specify in a separate catch block, how we
want to treat such errors (like displaying an error message to
the user). So if any of our await statements in the try block
fails, the execution jumps right into the catch block.

Mastering Async / Await

Now, that we got the basic concept of Async / Await, there’s
just one piece missing to fully master this new syntax. We
need to understand Promises. Promises are, as I mentioned
earlier, another way of handling asynchronous code in
JavaScript. They build the foundation of Async / Await —
which is in the end only syntactical sugar on top of Promises.
Therefore, understanding the concept of Promises is
key to really master Async / Await.

Basically, a Promise is an object which may produce a value in

the future — depending on whether the asynchronous call will
resolve successfully or will be rejected. What is meant by this
can be seen in the graphic again: We start an operation at the
beginning and this operation promises, so to say, that it will
return a response later on.

Important to know is that every Async / Await function

returns such a Promise. Since it is an asynchronous
operation, it returns a response in the future which we then
have to resolve.

Async / Await always returns a Promise

In our example, the fetchData function in line 11 returns a
Promise instead of the actual data we want to have. To
retrieve the data, we have to wait until the Promise has been
resolved (meaning the response of our asynchronous
fetchData function has been returned). We can do that by
using the then method. This function takes another function
as an argument where we pass in the response. In the

6 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

function body, we can then work with the actual received data
of our fetchData call.

const fetchData = async (url) => {

try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch(error) {
// Handle errors as needed
}
}
fetchData("https://example.com/posts")
.then( json => console.log(json) );

Understanding-Async-Await-2.js hosted with ❤ by GitHub view raw

As you can see, Async / Await is a really simple and clean

syntax to handle asynchronous code in JavaScript. However, if
you want to work smoothly with this new method, there is no
way around Promises since they build the foundation of it.
Therefore, learning them too is highly recommended.

I hope this article helped you in understanding what Async /

Await is all about! As always I am interested to hear your
thoughts on that topic — share them below!

JavaScript Web Development Programming Coding React

91 claps

7 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

WRITTEN BY

Konstantin Münster

e-commerce student — occasionally working as a freelance

web developer / designer. Writing about freelancing,
productivity, and web development.

Follow

JavaScript in Plain English

Learn the web's most important programming language.

Follow

More From Medium

More from JavaScript in Plain English

New Features In ES2020 You Should

Check

8 of 9 1/14/20, 3:58 PM
Async/Await for Beginners— Understanding As... https://googleweblight.com/i?u=https://medium...

Moon in JavaScript in Plain English 1.1K

Jan 5 · 4 min read

More from JavaScript in Plain English

Using JavaScript to Create Trello-Like

Card Re-Arrange and Drag and Drop
gravity well in JavaScript in Plain English 405
Jan 4 · 7 min read

More from JavaScript in Plain English

JavaScript Interview Questions You Need

To Know— Part III
Adi S in JavaScript in Plain English 197
Jan 7 · 4 min read

About Help Legal

Sign in JavaScript in Plain English

Write for JSIPE React

Vue Angular

Node Archive

9 of 9 1/14/20, 3:58 PM