Async JavaScript

JavaScript, by default, runs code line by line. Async JavaScript allows your code to do multiple things at the same time, making your web pages feel faster and more responsive, especially when dealing with tasks that take time, like fetching data from a server.

What is Asynchronous Programming?

Asynchronous programming is a way to handle operations that might take a while to complete without blocking the execution of other code. Imagine ordering food at a restaurant: you don’t want to wait at the counter until your food is ready. Instead, you can sit down, and the waiter will bring it to you when it’s done. Asynchronous JavaScript works similarly, allowing your code to continue running while waiting for things like network requests or timers to finish. This prevents the browser from freezing.

Basic Example: `setTimeout`

setTimeout is a simple example of asynchronous JavaScript. It allows you to run a function after a specified delay.


console.log("Start");
 
setTimeout(function() {
  console.log("This will appear after 2 seconds!");
}, 2000); // 2000 milliseconds = 2 seconds
 
console.log("End");

Explanation:

console.log("Start"); is executed immediately.
setTimeout() sets a timer. The function inside setTimeout (the console.log) won’t run immediately.
console.log("End"); is executed immediately after “Start”.
After 2 seconds, the function inside setTimeout finally runs, printing “This will appear after 2 seconds!”

This shows how code can continue running even while waiting for something to happen.

Practical Usage: Fetching Data

A very common use case is fetching data from an API (Application Programming Interface). This is asynchronous because it takes time to get the data from the server. We’ll use fetch and async/await (modern best practice) to handle this.


async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data'); // Replace with a real API endpoint
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}
 
fetchData();
console.log("Fetching data..."); // This will appear before the data (if any)