Synchronous, Asynchronous, Promises & Async/Await in JavaScript

Before we proceed with the core of what promises are and how they can be used for an Asynchronous process, let us first have a look at the difference between Synchronous and Asynchronous executions.

What are Synchronous and Asynchronous executions?

Synchronous: In synchronous operations, tasks are performed one at a time, and only when one is completed, the following is unblocked. In other words, you need to wait for a task to finish to move to the next one.

Asynchronous: In asynchronous operations, on the other hand, you can move to another task before the previous one finishes. This way, with asynchronous programming you’re able to deal with multiple requests simultaneously, thus completing more tasks in a much shorter period of time.

Flow Chart for Sync and Async Executions

Usage of Synchronous and Asynchronous executions.

Let’s say a Company XYZ plans on taking multiple orders for products from customers.

If the company follows the Synchronous operation, then, the process will be like this:

• Fetch all the products that are to be sold.
• Once done fetching, analyze the market and find the target customers for all the products.
• Once done analyzing, start taking orders from the customers.

Now, the biggest advantage of the Synchronous operation over here is TIME.

If the total products would just be 5 or 6 products then it wouldn’t have much impact using the Synchronous operation (ie. TIME wouldn’t be a concern over here). But let’s assume that the company grows in size and now it has 10,000 products to be sold. Will it be feasible to follow the synchronous operation now?

This is where Asynchronous operation comes into the picture.

Now, let’s assume that the same company follows the Asynchronous operation. What will the flow of the operation be like?

• Fetch 1 product that is to be sold instead of all the products.
• Parallelly as soon as 1 product is fetched, analyze the market for that 1 product to find the target customers.
• Parallelly start accepting orders for that product from the customers.

Now, the biggest advantage over here is TIME.

Flow for the above example

Code Implementation (Synchronous execution):

Code Implementation (Asynchronous execution):

What are Promises?

“I Promise to return a Result even if it is a Positive or a Negative Result!”

A Promise basically helps in the execution of an Asynchronous operation.

Producing code: Code that can take some time

Consuming code: Code that must wait for the result

A Promise is like a bridge that links the producing code and the consuming code.

Real-life scenario:

Promises Result States

A promise can be in one of the below 3 states:

• Pending
• Fulfilled or Resolved
• Rejected

While a Promise object is “pending” (working), the result is undefined.

When a Promise object is “fulfilled” or “resolved”, the result is a value.

When a Promise object is “rejected”, the result is an error.

Real-life scenario:

A promise is an action that guarantees a result in the future. The result could be the expected one (ie. positive) and if anything goes wrong, the result will be something that was not anticipated (ie. negative).

So, in the above example,

• If Tom cleans his room (ie. fulfilling the promise condition), he gets to play football.
• But if he does not clean his room (ie. fail to complete the promise condition), he needs to do the laundry as told by his mom.

Code Implementation (Promises):

Async/Await Approach

“Async and Await make promises easier to write”

Async: makes a function return a Promise

Await: makes a function wait for a Promise

Use Cases:

• Asynchronous operations
• API calls
• Sleep events

Thank you for reading. Until next time, keep learning!