JavaScript async/await: Complete Tutorial Guide

// Synchronous function
function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 3
 
// async function: return value is wrapped in a Promise
async function addAsync(a, b) {
  return a + b;
}
addAsync(1, 2).then(console.log); // 3
 
// If you explicitly return a Promise, it is NOT double-wrapped
async function fetchUser(id) {
  return fetch(`/api/users/${id}`).then((r) => r.json());
  // Returns the same Promise — not a Promise<Promise<...>>
}

async function example() {
  return 42;
}
 
const result = example();
console.log(result instanceof Promise); // true
console.log(result); // Promise { 42 }
 
result.then((v) => console.log(v)); // 42

async function loadUser(id) {
  // Execution pauses here until fetchUser resolves
  const user = await fetchUser(id);
 
  // This line runs only after fetchUser resolves
  console.log(user.name);
 
  return user;
}

console.log("before call");
 
async function step() {
  console.log("before await");
  const result = await Promise.resolve("done");
  console.log("after await:", result); // Runs as microtask
}
 
step();
console.log("after call");
 
// Output:
// "before call"
// "before await"
// "after call"          ← main thread continues synchronously
// "after await: done"   ← microtask runs after synchronous code

async function demo() {
  const a = await 42;          // await 42 = await Promise.resolve(42)
  const b = await "hello";     // Immediate
  const c = await null;        // null
  console.log(a, b, c);       // 42 "hello" null
}

async function loadDashboard(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(user.id);
    return { user, posts };
  } catch (error) {
    // Catches rejection from fetchUser OR fetchPosts
    console.error("Dashboard load failed:", error.message);
    return null;
  }
}

async function initApp() {
  let config;
  try {
    config = await loadConfig();
  } catch {
    config = defaultConfig; // Fall back silently
  }
 
  let user;
  try {
    user = await authenticateUser();
  } catch (err) {
    redirectToLogin();
    return; // Stop initialization
  }
 
  renderApp(config, user);
}

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}
 
// Option 1: try/catch inside
async function useData() {
  try {
    const data = await fetchData("/api/data");
    process(data);
  } catch (err) {
    handleError(err);
  }
}
 
// Option 2: .catch() at the call site
fetchData("/api/data")
  .then(process)
  .catch(handleError);
 
// Option 3: per-await .catch() for inline fallback
async function useDataWithFallback() {
  const data = await fetchData("/api/data").catch(() => defaultData);
  process(data); // data is never undefined
}

// SLOW: sequential — each waits for the previous
async function loadProfileSlow(userId) {
  const user = await fetchUser(userId);     // 200ms
  const posts = await fetchPosts(userId);   // 300ms
  const friends = await fetchFriends(userId); // 150ms
  // Total: 650ms
  return { user, posts, friends };
}
 
// FAST: parallel — all run simultaneously
async function loadProfileFast(userId) {
  const [user, posts, friends] = await Promise.all([
    fetchUser(userId),     // \
    fetchPosts(userId),    //  } all start at the same time
    fetchFriends(userId),  // /
  ]);
  // Total: 300ms (slowest one)
  return { user, posts, friends };
}
 
// CORRECT approach: use sequential when there's a dependency
async function loadProfileWithDependency(userId) {
  const user = await fetchUser(userId);          // Must come first
  const [posts, friends] = await Promise.all([  // These two are independent
    fetchPosts(user.id),
    fetchFriends(user.id),
  ]);
  return { user, posts, friends };
}

const ids = [1, 2, 3, 4, 5];
 
// WRONG: sequential — each fetch waits for the previous
async function fetchAllSlow(ids) {
  const results = [];
  for (const id of ids) {
    const data = await fetchItem(id); // Each waits!
    results.push(data);
  }
  return results;
}
 
// CORRECT: parallel with Promise.all
async function fetchAllFast(ids) {
  return Promise.all(ids.map((id) => fetchItem(id)));
}
 
// ALSO CORRECT: for-await with serial processing when order matters
async function processInOrder(ids) {
  const results = [];
  for (const id of ids) {
    const data = await fetchItem(id);
    results.push(await processItem(data)); // Must be sequential
  }
  return results;
}

async function saveUser(user) {
  await db.save(user); // Correctly awaited
}
 
async function handleRequest() {
  saveUser(updatedUser); // Missing await! Runs in background
  sendResponse(200);     // Sends response before save might complete
}
 
// Fix:
async function handleRequestFixed() {
  await saveUser(updatedUser);
  sendResponse(200);
}

// WRONG: await inside a non-async callback
async function processItems(items) {
  items.forEach((item) => {
    const result = await processItem(item); // SyntaxError!
    log(result);
  });
}
 
// CORRECT: make the callback async
async function processItems(items) {
  items.forEach(async (item) => {    // async callback
    const result = await processItem(item); // Works, but...
    log(result);                            // forEach does not await these!
  });
}
 
// ACTUALLY CORRECT: use Promise.all + .map()
async function processItems(items) {
  await Promise.all(
    items.map(async (item) => {
      const result = await processItem(item);
      log(result);
    })
  );
}

// Function declaration
async function fetchData() { ... }
 
// Function expression
const fetchData = async function () { ... };
 
// Arrow function
const fetchData = async () => { ... };
 
// Method
const api = {
  async fetchData() { ... },
};
 
// Class method
class DataService {
  async fetchData() { ... }
}