Async JavaScript

JavaScript Fundamentals

Async JavaScript

Beginner Lesson 9 of 10

Async JavaScript

Asynchronous programming allows code to run without blocking other operations.

Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

Promises

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("Data received");
    } else {
      reject("Error occurred");
    }
  }, 1000);
});

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

Async/Await

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error:", error);
  }
}

// Usage
const data = await fetchData();

Fetch API

// GET request
const response = await fetch("https://api.example.com/users");
const users = await response.json();

// POST request
const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "John", email: "john@example.com" })
});

Promise Methods

// Wait for all promises
const results = await Promise.all([
  fetch("/api/users"),
  fetch("/api/posts"),
  fetch("/api/comments")
]);

// Wait for first to resolve
const fastest = await Promise.race([
  fetch("/api/server1"),
  fetch("/api/server2")
]);

// Wait for all, even if some fail
const results = await Promise.allSettled([
  Promise.resolve(1),
  Promise.reject("error"),
  Promise.resolve(3)
]);

Error Handling

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;
      await new Promise(r => setTimeout(r, 1000 * (i + 1)));
    }
  }
}

Next Steps

Continue to ES6+ Features →