2026-01-175 min read

Asynchronous (Web Development)

Q: 2. Can I use async/await with non-Promise-based asynchronous operations?

No, `async` and `await` keywords can only be used with Promise-based asynchronous operations. To use them with other asynchronous functions like callbacks or generators, you'll need to convert them into Promises first.

Learn Asynchronous (Web Development) step by step with clear examples and exercises.

Why This Matters

Asynchronous web development is crucial as it allows us to build responsive, fast, and user-friendly websites by executing multiple tasks concurrently without blocking the main thread. It's essential for handling user interactions, API calls, and data processing in real time, improving overall performance and user experience. By mastering asynchronous web development techniques, developers can create more efficient and engaging websites that cater to modern user expectations.

Prerequisites

To understand asynchronous web development, you should be familiar with:

HTML and CSS basics
JavaScript fundamentals, including variables, functions, and control structures
Event-driven programming concepts
Understanding of the DOM (Document Object Model)
Basic understanding of Promises and callbacks (optional but recommended for a smoother learning experience)

Core Concept

Asynchronous web development revolves around non-blocking calls, promises, event listeners, and modern techniques like async/await. Let's dive into each concept:

Non-Blocking Calls

Non-blocking calls allow JavaScript to execute other tasks while waiting for the result of an operation. This is achieved using callback functions or Promises.

function loadData(callback) {
// Asynchronous operation
setTimeout(() => {
const data = 'Loaded Data';
callback(data);
}, 2000);
}

loadData((data) => console.log(data));

In this example, the loadData() function performs an asynchronous operation using setTimeout(). Instead of waiting for the data to load, it calls a callback function when the data is ready.

Promises

Promises are objects that represent the eventual completion or failure of an asynchronous operation and its resulting value. They provide a more elegant solution than callbacks for handling multiple asynchronous operations.

const promise = new Promise((resolve, reject) => {
// Asynchronous operation
setTimeout(() => {
const data = 'Loaded Data';
resolve(data);
}, 2000);
});

promise
.then((data) => console.log(data))
.catch((error) => console.error(error));

In this example, a Promise object is created to represent the asynchronous operation using setTimeout(). The .then() method is used to handle the successful resolution of the promise, while the .catch() method catches any errors that may occur.

Event Listeners

Event listeners allow JavaScript to react to user interactions or system events. By using event listeners, we can make our web applications more responsive and interactive.

document.getElementById('myButton').addEventListener('click', function() {
// Handle click event
});

In this example, an event listener is added to a button element using the addEventListener() method. When the user clicks the button, the associated function will be executed.

Modern Techniques (async/await)

Async/await is a modern JavaScript feature that simplifies working with Promises by allowing developers to write asynchronous code that looks and behaves like synchronous code.

const apiUrl = 'https://api.example.com/data';

async function fetchData() {
const response = await fetch(apiUrl);
const data = await response.json();
return data;
}

fetchData().then((data) => console.log(data));

In this example, the fetchData() function is defined as an async function and uses await to wait for the API call to complete before parsing the response as JSON. Once the data is available, it's returned as a Promise that can be handled using the .then() method.

Worked Example

Let's create a simple asynchronous web application that fetches data from an API and updates the DOM when it's available using async/await.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Asynchronous Web Development Example</title>
</head>
<body>
<h1>Asynchronous Web Development Example</h1>
<div id="data"></div>

<script>
const apiUrl = 'https://api.example.com/data';

async function fetchData() {
const response = await fetch(apiUrl);
const data = await response.json();
return data;
}

fetchData().then((data) => {
document.getElementById('data').innerHTML = data;
});
</script>
</body>
</html>

In this example, we're using the fetch() function to make an asynchronous API call using async/await. The response is parsed as JSON and used to update the DOM when it's available. If there's an error during the process, it will be caught and handled appropriately.

Common Mistakes

1. Not handling errors properly

When working with asynchronous operations, it's essential to handle errors using .catch() or other appropriate methods. Failing to do so can lead to unhandled exceptions and unexpected behavior.

Example:

fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => console.log(data)); // No error handling!

2. Mixing synchronous and asynchronous code

Mixing synchronous and asynchronous code can result in unpredictable execution order and performance issues. It's important to keep asynchronous operations separate from synchronous code to maintain a clear structure and avoid conflicts.

Example:

function syncFunction() {
console.log('Synchronous function');
}

async function asyncFunction() {
console.log('Asynchronous function');
await someAsyncOperation();
}

syncFunction(); // Synchronous function logs before asynchronous function starts
asyncFunction(); // Asynchronous function logs after synchronous function finishes

3. Overusing callbacks or nested promises

Excessive use of callbacks or nested promises can make your code difficult to read, test, and debug. Consider using libraries like async/await to simplify asynchronous operations.

Example:

function callbackFunction(err, data) {
if (err) return console.error(err);
console.log(data);
}

function someAsyncOperation(callback) {
// Asynchronous operation
setTimeout(() => {
const data = 'Loaded Data';
callback(null, data);
}, 2000);
}

someAsyncOperation(callbackFunction);

4. Misusing async/await

While async/await simplifies asynchronous code, it's important to use it correctly. Avoid using await inside loops or conditions that may result in infinite loops or unexpected behavior.

Example:

async function infiniteLoop() {
while (true) {
await someAsyncOperation();
}
}

Practice Questions

Write a function that makes an asynchronous API call and returns the response as a Promise using fetch().
Implement event listeners for multiple elements on a web page using addEventListener().
Refactor the worked example to use callbacks instead of async/await.
Create a simple web application that fetches data from two different APIs and updates the DOM with the combined data when both requests complete successfully.

FAQ

1. What is the difference between callbacks and promises?

Callbacks are functions passed as arguments to other functions to be executed when an asynchronous operation completes, while Promises are objects that represent the eventual completion or failure of an asynchronous operation and its resulting value.

2. Can I use async/await with non-Promise-based asynchronous operations?

No, async and await keywords can only be used with Promise-based asynchronous operations. To use them with other asynchronous functions like callbacks or generators, you'll need to convert them into Promises first.

3. Why is it important to handle errors properly in asynchronous code?

Proper error handling is crucial in asynchronous code because unhandled exceptions can cause unexpected behavior and make debugging more difficult. By using .catch() or other appropriate methods, developers can ensure that their applications remain stable and responsive even when faced with errors.