DEV Community

Cover image for Asynchronous Programming With Examples
Aiviraj Rajput
Aiviraj Rajput

Posted on

Asynchronous Programming With Examples

#javascript #webdev #programming #asychronousprogramming

Asynchronous programming is a very important concept in JavaScript, through which tasks execute in a concurrent manner, making applications perform better and enhancing user experience. It does not work like synchronous programming, where tasks are executed one after the other. In order to run parallelly and perform better, asynchronous programming does not allow the code execution to wait for any time-consuming operations, be it the fetching of data from a server or reading files.

The Basics of Asynchronous programming Execution

In this, functions are executed independently of the main program flow. It means, if one task is processing, the rest of the program can continue running and executing other tasks without waiting for asynchronous operation to finish. There are several ways in JavaScript to run program asynchronously:

  1. Callbacks
  2. Promises
  3. Async/ Await

Callback

Callbacks are one of the essential concepts for the asynchronous programming of JavaScript. Basically, a callback is a function that is passed as an argument to another function and is invoked or called later, after some operation has been completed. Callbacks find major use in cases where an operation will take some time to complete, for example, fetching data from a server or reading a file. Therefore , nesting of callback-based code to achieve control flow makes it hard to read and leads to phenomenon known as "callback hell".

function fetchData(callback) { setTimeout(() => { callback("Data fetched successfully"); }, 2000); } fetchData((data) => { console.log(data); });
Enter fullscreen mode Exit fullscreen mode 
Data fetched successfully
Enter fullscreen mode Exit fullscreen mode

The fetchData function simulates an asynchronous operation using setTimeout. When the operation completes, it invokes the callback function passed to it with the fetched data.

Promises

It was introduced in ES6 as a cleaner alternative to callbacks. A promise represents the eventual completion or failure of an asynchronous operation and allows chaining of multiple asynchronous operations. This chaining really makes promise-based code far more readable and manageable than callback-based code. Therefore , promises can be in one of the three states : pending , resolved(fulfilled) and rejected.

function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Data fetched successfully"); }, 2000); }); } fetchData().then((data) => { console.log(data); });
Enter fullscreen mode Exit fullscreen mode 
Data fetched successfully
Enter fullscreen mode Exit fullscreen mode

Async/Await

Async/await is a feature in modern JavaScript, which makes the writing of asynchronous code easier for both reading and maintenance. It builds on top of the concept of promises and introduces a more natural and synchronous-like way of dealing with asynchronous operations.

Basics of Async/Await

Async Functions

An async function is a special type of function that is capable of executing operations asynchronously within it. This is defined using the async keyword before a function declaration.

async function fetchData() { // Asynchronous operations go here }
Enter fullscreen mode Exit fullscreen mode

Await Functions

The await keyword is used inside async functions to pause the execution of the function until the Promise is resolved. It can only be used inside async functions, and it is followed by a promise. When await is used, the function execution is paused until the promise is resolved, returning its resolved value.

async function fetchData() { const data = await fetch('https://api.example.com/data'); console.log(data); }
Enter fullscreen mode Exit fullscreen mode

In the above example, the async function fetchData fetches data from an API using the fetch function. The await keyword pauses the function’s execution until it fetches the data from the API. Once fetched, it assigns the data to the data variable.

function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Data fetched successfully"); }, 2000); }); } async function fetchDataAsync() { const data = await fetchData(); console.log(data); } fetchDataAsync();
Enter fullscreen mode Exit fullscreen mode 
Data fetched successfully
Enter fullscreen mode Exit fullscreen mode

The function fetchDataAsync is marked as async, so await can be used inside it. Inside fetchDataAsync, the await keyword causes the function to pause its execution until the fetchData promise resolves, then assigns the resolved value to the data variable.

Conclusion

Asynchronous programming lies at the heart of JavaScript development, allowing developers to create effective and responsive web applications. Understand the fundamentals of asynchronous execution and how to master modern patterns in the asynchronous world, such as promises and async/await, to write clean, scalable, and maintainable code. Learn how to write high-quality and maintainable, asynchronous programs with proper error handling and dependency management to achieve top-level performance in digital environments today.

Top comments (0)