In this tutorial, you will learn about the differences between
setTimour(), or a
yield) , promises and
Await is the latest way that developers can write asynchronous code. Released in ECMAScript 2017,
Await is a new syntax that wraps around functions that returns promises. Using async/await is a way to structure your asynchronous code so that it is easier to read. The beauty of
await is that it makes asynchronous code read like synchronous code. Anything that can make code easier to read for developers will give your project a massive quality boost in terms of readability. This is why you need to know about this stuff, improving quality should be one of your main goals whenever you write code. Below shows how to structure a function so it is asynchronous and take advantage of using
Let us look at what is going on here:
On Line1, the function is decorated with the
On Line2, the
awaitkeyword is used. The
awaitkeyword will make the function wait until the promise resolves.
On Line3, the promises
resolvevalue is stored in a parameter called
Async/await functions are known to be non-blocking functions. When
async before a function tells the compiler that the function has to return a promise. The benefit of writing code like this is that your asynchronous code can now look and behave like synchronous code. This type of code is a lot easier to read and comprehend compared to code that has lots of nested functions. This is why
await code is loved by developers. It makes it easier for them to understand what is going on within a codebase.
We now have a frame of reference on how to write asynchronous code using
await. I have made a lot of comparisons between writing asynchronous code using promises andasync and
The first thing you need to understand around the
await vs promise debate is that it is mainly about code style.
await is a sugar-syntax wrapper around a promise. Everything that you can do when writing code that handles asynchronous calls using
await you can do with a promise instead.
Understanding the philosophy of how a
Promises were released in 2012 to make developers lives easier 😮💨Developers pretty much universally agree that asynchronous code that is written using the promise style syntax is much easier to write compared to writing code using callback functions.
Using a promise makes it easier to track whether an asynchronous event has been executed or not. This is possible through the promise state management. At any given time, a promise can be in one of three states:
Pending: Initial State, before the event has happened. For example, when data is requested from an API, the
promise will be in a pending state until the data is returned.
Resolved: After the operation was completed successfully the
resolve method is called.
Rejected: If the operation had an error during execution, the promise fails and the
rejected method is called.
After a function is called that returns a promise, the promise can be handled in one of two ways. If the promise returns in a resolved state, you can use a function called
then() to define what should happen next in the code. If the promise is returned in a rejected state you can use a function called
catch() to define what should happen next. To create a promise, you will need to define a
Promise object with the correct constructor arguments:
In the code above, if the result of
resolve is called and the promise returns in the resolved state. If
GetState() returns false an error is created and the promise is returned in the rejected state. The code to call that promise would be written like this:
In the code above, the
then() function is executed when the promise returns in a resolved state and the code in the
catch() function is executed when the promise returns in a rejected state.
Another useful thing to note is that a
Promise can be chained. If you call a function that returns a promise and that promise returns another promise then the
then() functions can be chain together. This type of code would look similar to this:
As long as each calling function returns a promise, this chaining can go on forever 😵💫. This promise chaining allows developers to write less code, however, promise chaining can make it harder to understand what the code is doing and follow all the different execution paths.
Async/Await Vs Promise
As long as each calling function returns a promise, this chaining can go on forever 😵💫. This promise chaining allows developers to write less code, however, promise chaining can make it harder to understand what the code is doing. This is especially true when you are trying to follow all the different execution paths.
Async/Await Vs Promise
As you can see from the two code examples, there are several differences between promises and async/await:
Most developers agree that using
awaitresults in more concise and easier to reason about code
awaitallows you to wrap your code using a
catchto handle errors. This can make it easier to manage errors compared to promise rejected chaining and
awaitkeyword only works inside functions decorated with the
asynckeyword. If you try to use
awaitin a normal function the compiler will throw a
When writing asynchronous code where the results are reliant on the results from other asynchronous code, code can start to become very hard and confusing to read using a promise, take this example:
await the same code is much easier to comprehend and reason about:
I personally find it much easier to read the second snippet as it is written sequentially. As long as you use good naming conventions the second argument will read more like a normal sentence. Code that is written in a declarative syntax has been proved to be easier to understand compared to more imperial styled code. Basically,
await makes it easier for my tiny little brain to understand what is going on 🤯
I am hoping this guide helps you understand the differences between code written using a
await style compared to code written using a
promise based style. At the time of writing, when you need to write async code, use
await as the developer community in general agrees that this will lead to easier to understand code!
Happy Coding 🤘