// Fetch data → process it → save it → send notification
fetchUser(userId, function(user) {
  fetchOrders(user.id, function(orders) {
    processOrders(orders, function(result) {
      saveResult(result, function(saved) {
        sendNotification(saved, function(notif) {
          // Callback Hell!
          // We are already 5 indentation levels deep just to get here
        })
      })
    })
  })
})

// Writing the same logic with Promises
fetchUser(userId)
  .then(user => fetchOrders(user.id))
  .then(orders => processOrders(orders))
  .then(result => saveResult(result))
  .then(saved => sendNotification(saved))
  .catch(error => console.error("If an error occurs anywhere, it comes here"));

const myPromise = new Promise((resolve, reject) => {
  // Perform asynchronous task
  const success = true;

  if (success) {
    resolve("Success value!");  // Transitions to Fulfilled state
  } else {
    reject(new Error("Fail"));  // Transitions to Rejected state
  }
});

// Usage
myPromise
  .then(value => console.log(value))      // "Success value!"
  .catch(error => console.error(error));  // Error handling

// You can copy and paste this directly into your browser console to run it
fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(user => console.log(user.name))  // "Leanne Graham"
  .catch(error => console.error("Request failed:", error));

// Promise version (Cons: Hard to share variables, hard to read)
function getOrdersForUser(userId) {
  return fetchUser(userId)
    .then(user => {
      return fetchOrders(user.id)
        .then(orders => ({ user, orders })); // A workaround to pass 'user' down
    })
    .then(({ user, orders}) => {
      return processOrders(user, orders);
    });
}

// async/await version
async function getOrdersForUser(userId) {
  const user = await fetchUser(userId);       // Freely use the 'user' variable
  const orders = await fetchOrders(user.id);  // Freely use the 'orders' variable
  return processOrders(user, orders);         // Just use both naturally!
}

async function getOrdersForUser(userId) {
  try {
    const user = await fetchUser(userId);
    const orders = await fetchOrders(user.id);
    return processOrders(user, orders);
  } catch (error) {
    // The stack trace clearly shows where the error occurred
    console.error("Error occurred:", error);
  }
}

// Difficult to share variables across different 'then' blocks
fetchUser()
  .then(user => {
    return fetchOrders(user.id); // What if we want to use 'user' in the next 'then'?
  })
  .then(orders => {
    // How do we access 'user' here?
    // We have to use workarounds like saving 'user' to an external variable.
  });

// The stack trace doesn't clearly show which 'then' threw the error
fetchUser()
    .then(processData)    // Did it happen here?
    .then(saveData)       // Or here?
    .then(notify)         // Or here?
    .catch(e => console.log(e)); // Hard to track the error's origin

const promise = fetchHugeData(); // Started

// The user leaves the page... but we can't stop the request
// promise.cancel() ← No such method exists

// Readability drops when different logic is needed based on conditions
fetchData()
  .then(data => {
    if (data.type === 'A') {
      return processA(data).then(result => ({result, type: 'A'}));
    } else {
      return processB(data).then(result => ({result, type: 'B'}));
    }
  })
  .then(({result, type}) => {
    // Having to pass 'type' along like this feels hacky.
  })

// If done sequentially, 3 seconds each = 9 seconds
// With Promise.all done concurrently, it takes 3 seconds (as long as the slowest one)
const [user, posts, comments] = await Promise.all([
  fetchUser(userId),
  fetchPosts(userId),
  fetchComments(userId)
]);
// However, if even one fails, the entire operation fails

// Promise.all behavior: If one fails, the rest are ignored
// Promise.allSettled: Returns the results of all, whether they succeeded or failed
const results = await Promise.allSettled([
  fetchUser(userId),
  fetchPosts(userId),     // ← Even if this fails
  fetchComments(userId)   // This will still return its result
]);

results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log(result.value);
  }
  if (result.status === 'rejected') {
    console.log(result.reason);
  }
})

// Useful for implementing timeouts
const result = await Promise.race([
  fetchData(),                    // Actual request
  new Promise((_, reject) => {    // Timeout
    setTimeout(() => reject(new Error("Timeout")), 5000);
  })
]);

const controller = new AbortController();

// Start request
fetch('/api/huge-data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request was cancelled');  // Cancellation detected
    }
  });

// When the user leaves the page
controller.abort(); // Cancel the request