Understanding Asynchronous JavaScript

1️⃣ Asynchronous JavaScript

JavaScript runs on a single thread — meaning it executes one line at a time. However, it doesn’t block execution for slow tasks like API calls or timers. Instead, it uses an event loop to handle tasks asynchronously (in the background).

Key Concepts:

• Synchronous: Code runs line-by-line, each line waits for the previous one.
• Asynchronous: Some code (like API calls) runs in the background, allowing other tasks to continue.
• Event Loop: The mechanism that manages asynchronous tasks and executes callbacks when ready.

console.log("Start");
setTimeout(() => console.log("After 2 seconds"), 2000);
console.log("End");

// Output:
// Start
// End
// After 2 seconds

2️⃣ Promises

A Promise in JavaScript represents a task that will complete in the future. It’s like saying, “I’ll give you the result later.” Promises make asynchronous code easier to manage than traditional callbacks.

Promise States:

• Pending: The task is still running.
• Fulfilled: The task completed successfully.
• Rejected: The task failed with an error.

const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("✅ Data loaded successfully!");
  } else {
    reject("❌ Failed to load data");
  }
});

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

3️⃣ Fetch API

The Fetch API allows JavaScript to communicate with servers using HTTP requests (like GET, POST, PUT, DELETE). It returns a Promise, making it perfect for asynchronous data fetching.

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => console.log("Posts:", data))
  .catch(error => console.error("Error fetching data:", error));

Explanation:

• fetch() sends the request and returns a Promise.
• response.json() also returns a Promise that resolves with parsed JSON data.
• We use .then() to handle success and .catch() for errors.

4️⃣ Async / Await

The async and await keywords simplify working with Promises. Instead of chaining multiple .then() blocks, you can write asynchronous code that looks synchronous.

async function getPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.error("Error:", error);
  }
}

getPosts();

Rules:

• await can only be used inside an async function.
• Execution pauses at await until the Promise resolves.
• Use try...catch to handle errors.

5️⃣ Error Handling in Asynchronous Code

Handling errors properly ensures your app doesn’t crash when something unexpected happens (like a failed API call or network issue).

async function fetchData() {
  try {
    const res = await fetch("https://wrong-url.com/data");
    if (!res.ok) {
      throw new Error("Network response failed");
    }
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("❌ Error occurred:", err.message);
  } finally {
    console.log("✅ Request finished (success or fail)");
  }
}

fetchData();

Best Practices:

• Always use try...catch when using async/await.
• Use finally for cleanup tasks (like hiding loaders).
• Always check response.ok before using the data.