ai js promise Tutorial 2026-04-21

By Xah Lee. Date: .
xtodo

JavaScript Promises Tutorial 2026-04-21

(ai answer)

Chaining Promises

This is where Promises shine:

function fetchUser(id) {
  return new Promise(resolve => {
    setTimeout(() => resolve({ id, name: "Xah" }), 500);
  });
}

function fetchPosts(userId) {
  return new Promise(resolve => {
    setTimeout(() => resolve(["Post1", "Post2"]), 500);
  });
}

fetchUser(1)
  .then(user => {
    console.log("User:", user);
    return fetchPosts(user.id);   // return another promise
  })
  .then(posts => {
    console.log("Posts:", posts);
  })
  .catch(err => console.error(err));

Each .then() receives the resolved value from the previous promise.

Promise Static Methods

Method Description Use Case
Promise.all() Wait for all promises to resolve Multiple parallel requests
Promise.allSettled() Wait for all to settle (fulfilled or rejected) When you want all results
Promise.race() First promise to settle wins Timeout / fastest response
Promise.any() First promise to fulfill First successful response
Promise.resolve() Create already resolved promise Quick values
Promise.reject() Create already rejected promise Quick errors

Examples

// 1. Promise.all
const promises = [
  fetchUser(1),
  fetchPosts(1),
  Promise.resolve("static")
];

Promise.all(promises)
  .then(results => console.log(results))
  .catch(err => console.error("One failed:", err));

// 2. Promise.race with timeout
function timeout(ms) {
  return new Promise((_, reject) => setTimeout(() => reject("Timeout"), ms));
}

Promise.race([fetchUser(1), timeout(100)])
  .then(user => console.log("Got user fast"))
  .catch(err => console.log(err));

Error Handling Best Practices

  1. Always use .catch() or try/catch with await
  2. Reject with real Error objects (not strings)
  3. Use .finally() for cleanup
  4. Avoid mixing callbacks and promises

Common pattern:

async function safeFetch(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("Fetch failed:", err);
    throw err; // re-throw if caller needs to handle
  }
}

Real-World Example: Fetch API

async function getUserData(username) {
  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    if (!response.ok) throw new Error("User not found");

    const user = await response.json();
    console.log(user);
    return user;
  } catch (error) {
    console.error("Failed to fetch user:", error);
  }
}

getUserData("john");