Module 1.2: Asynchronous JavaScript - Promise, Async/Await

// Synchronous - Blocking
console.log('1. Start');
console.log('2. Processing data');
console.log('3. End');
// Output: 1 -> 2 -> 3
 
// Asynchronous - Non-blocking
console.log('1. Start');
setTimeout(() => {
  console.log('2. Processing data (after 1 second)');
}, 1000);
console.log('3. End');
// Output: 1 -> 3 -> 2

const fetchData = (callback) => {
  setTimeout(() => {
    const data = { id: 1, name: 'Alice' };
    callback(data);
  }, 1000);
};
 
fetchData((result) => {
  console.log('Data:', result);
});

// ❌ Callback Hell - "Pyramid of Doom"
getUser(userId, (err, user) => {
  if (err) return handleError(err);
  getOrders(user.id, (err, orders) => {
    if (err) return handleError(err);
    getOrderDetails(orders[0].id, (err, details) => {
      if (err) return handleError(err);
      console.log('Details:', details);
    });
  });
});

const myPromise = new Promise((resolve, reject) => {
  const success = true;
 
  if (success) {
    resolve('Success!');
  } else {
    reject(new Error('Failure!'));
  }
});

// Simulating an API call
const fetchUser = (userId) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, name: 'Alice' });
      } else {
        reject(new Error('Invalid user ID'));
      }
    }, 1000);
  });
};

fetchUser(1)
  .then((user) => {
    console.log('User:', user);
    return user.id; // Pass the user ID to the next .then
  })
  .then((userId) => {
    console.log('User ID:', userId);
  })
  .catch((error) => {
    console.error('Error:', error.message);
  })
  .finally(() => {
    console.log('Operation complete');
  });

// ✅ Solves Callback Hell
getUser(userId)
  .then((user) => getOrders(user.id)) // Chain the next async operation
  .then((orders) => getOrderDetails(orders[0].id))
  .then((details) => {
    console.log('Details:', details);
  })
  .catch((error) => {
    console.error('Error:', error.message); // Catch any error from the chain
  });

const p1 = fetchUser(1);
const p2 = fetchUser(2);
const p3 = fetchUser(3);
 
// Promise.all - Waits for ALL promises to fulfill
Promise.all([p1, p2, p3])
  .then((users) => console.log('All users:', users))
  .catch((error) => console.error('One request failed:', error));
 
// Promise.allSettled - Waits for all promises, regardless of outcome
Promise.allSettled([p1, p2, p3]).then((results) => {
  results.forEach((result) => {
    if (result.status === 'fulfilled') {
      console.log('Success:', result.value);
    } else {
      console.log('Failed:', result.reason);
    }
  });
});
 
// Promise.race - Returns the result of the first promise to settle
Promise.race([p1, p2, p3]).then((firstUser) => console.log('First settled:', firstUser));

// Declaring an async function
async function fetchData() {
  const result = await somePromise; // 'await' pauses execution until the promise resolves
  return result;
}
 
// Arrow function with async
const fetchData = async () => {
  const result = await somePromise;
  return result;
};

// Promise chaining
getUser(userId)
  .then((user) => getOrders(user.id))
  .then((orders) => console.log(orders));
 
// Async/Await - Much more readable!
const loadData = async () => {
  const user = await getUser(userId);
  const orders = await getOrders(user.id);
  console.log(orders);
};

const fetchUserSafely = async (userId) => {
  try {
    const user = await fetchUser(userId);
    const orders = await fetchOrders(user.id);
    return { success: true, data: { user, orders } };
  } catch (error) {
    console.error('Error:', error.message);
    return { success: false, error: error.message };
  } finally {
    console.log('Fetch operation finished');
  }
};
 
// Using the async function
const result = await fetchUserSafely(1);
if (result.success) {
  console.log('Data:', result.data);
}

// ❌ Sequential - Slow
const fetchAllSequential = async () => {
  const user1 = await fetchUser(1); // Waits 1s
  const user2 = await fetchUser(2); // Waits another 1s
  const user3 = await fetchUser(3); // Waits another 1s
  // Total: 3 seconds
};
 
// ✅ Parallel - Fast
const fetchAllParallel = async () => {
  const [user1, user2, user3] = await Promise.all([fetchUser(1), fetchUser(2), fetchUser(3)]);
  // Total: ~1 second
};

// fake-api.js
 
// Helper function for introducing delays
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
// Mock database
const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com' },
];
 
// GET all users endpoint
export const getUsers = async (delayMs = 1000) => {
  await delay(delayMs);
  return { success: true, data: [...users] }; // Return a copy to prevent mutations
};
 
// GET user by ID endpoint
export const getUserById = async (id, delayMs = 800) => {
  await delay(delayMs);
  const user = users.find((u) => u.id === id);
 
  if (!user) {
    return { success: false, error: `User ${id} not found` };
  }
  return { success: true, data: user };
};
 
// POST create user endpoint
export const createUser = async (userData, delayMs = 1000) => {
  await delay(delayMs);
  const newUser = { id: users.length + 1, ...userData };
  users.push(newUser);
  return { success: true, data: newUser };
};

// Import functions from our fake API module
import { getUsers, getUserById, createUser } from './fake-api.js';
 
const main = async () => {
  // Fetch all users with a custom delay
  const allUsers = await getUsers(500);
  console.log('All users:', allUsers.data);
 
  // Fetch a single user with a custom delay
  const user = await getUserById(1, 300);
  console.log('User 1:', user.data);
 
  // Making parallel requests using Promise.all
  const [user1Result, user2Result] = await Promise.all([getUserById(1, 500), getUserById(2, 500)]);
  console.log('Parallel fetch results:', user1Result.data, user2Result.data);
};
 
// Execute the main async function
main();