Fetch API & Async JavaScript

// Simulating async operations with setTimeout
function getUser(id, callback) {
  setTimeout(() => {
    callback({ id, name: 'Alice' });
  }, 500);
}

function getOrders(userId, callback) {
  setTimeout(() => {
    callback([{ id: 1, item: 'Book' }, { id: 2, item: 'Pen' }]);
  }, 400);
}

function getShipping(orderId, callback) {
  setTimeout(() => {
    callback({ status: 'delivered', date: '2026-06-10' });
  }, 300);
}

// Callback Hell: every level adds another nest
getUser(1, (user) => {
  console.log('User:', user.name);
  getOrders(user.id, (orders) => {
    console.log('Orders:', orders.length);
    getShipping(orders[0].id, (shipping) => {
      console.log('Status:', shipping.status);
      // Imagine needing one more level... and another...
    });
  });
});

// Creating a Promise manually
const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Data loaded!');   // fulfilled
  } else {
    reject(new Error('Something went wrong'));  // rejected
  }
});

// Consuming a Promise
myPromise
  .then((value) => {
    console.log(value);          // 'Data loaded!'
    return value + ' Processed.';  // pass to next .then()
  })
  .then((processed) => {
    console.log(processed);     // 'Data loaded! Processed.'
  })
  .catch((err) => {
    console.error('Error:', err.message);  // catches any rejection above
  })
  .finally(() => {
    console.log('Always runs — like hiding a loading spinner');
  });

// Promise.resolve / Promise.reject shorthand
Promise.resolve(42).then(v => console.log(v));   // 42
Promise.reject('oops').catch(e => console.log(e)); // oops

// Mark the function with 'async'
async function loadUserData() {
  // 'await' pauses HERE until the promise resolves
  const user = await getUser(1);
  console.log(user.name);         // Alice

  const orders = await getOrders(user.id);
  console.log(orders.length);      // 2

  const shipping = await getShipping(orders[0].id);
  console.log(shipping.status);    // delivered

  return { user, orders, shipping }; // returns a Promise that resolves to this object
}

// Call it like any Promise
loadUserData().then(data => console.log(data));

// ─────────────────────────────────────────────────
// Parallel Execution with Promise.all()
// ─────────────────────────────────────────────────
async function loadDashboard() {
  // BAD: sequential (waits for each before starting the next)
  const users  = await fetchUsers();
  const posts  = await fetchPosts();
  const stats  = await fetchStats();

  // GOOD: parallel (all three fire simultaneously)
  const [users2, posts2, stats2] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchStats(),
  ]);

  return { users2, posts2, stats2 };
}

// fetch() returns Promise<Response>
async function getPost() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  // response.ok is true if status is 200-299
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }

  // .json() reads the response body and parses it as JSON
  const post = await response.json();

  console.log(post.title);   // 'sunt aut facere repellat...'
  console.log(post.body);    // post body text
  console.log(post.userId);  // 1

  return post;
}

getPost().then(data => console.log('Received:', data));

// ─────────────────────────────────────────────────
// The Response Object — key properties
// ─────────────────────────────────────────────────
const r = await fetch('https://jsonplaceholder.typicode.com/posts');

console.log(r.ok);          // true (status 200-299)
console.log(r.status);      // 200
console.log(r.statusText);  // "OK"
console.log(r.url);         // full URL string
r.headers.get('content-type');  // "application/json; charset=utf-8"

const allPosts = await r.json();   // array of 100 posts
console.log(allPosts.length);       // 100

async function createPost(title, body) {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      title,
      body,
      userId: 1,
    }),
  });

  if (!response.ok) {
    throw new Error(`Failed to create post: ${response.status}`);
  }

  const newPost = await response.json();
  console.log('Created:', newPost);
  // { title: '...', body: '...', userId: 1, id: 101 }
  return newPost;
}

createPost('My First Post', 'Hello from the Fetch API!');

// ─────────────────────────────────────────────────
// PUT and DELETE follow the same pattern
// ─────────────────────────────────────────────────
async function deletePost(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: 'DELETE',
  });
  if (response.ok) console.log('Deleted successfully');
}

async function fetchUserProfile(userId) {
  const spinner = document.getElementById('spinner');
  spinner.style.display = 'block';

  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);

    // Network succeeded but server returned an error code
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('User not found');
      }
      throw new Error(`Server error: ${response.status}`);
    }

    const user = await response.json();
    displayUser(user);
    return user;

  } catch (err) {
    // Catches: network failures AND errors we threw above
    console.error('Failed to load user:', err.message);
    showErrorMessage(err.message);
    return null;

  } finally {
    // Runs whether we succeeded or failed
    spinner.style.display = 'none';
  }
}

// ─────────────────────────────────────────────────
// Parallel requests with individual error handling
// ─────────────────────────────────────────────────
async function loadAll() {
  const results = await Promise.allSettled([
    fetch('https://api.example.com/posts'),
    fetch('https://api.example.com/users'),
  ]);

  results.forEach((result, i) => {
    if (result.status === 'fulfilled') {
      console.log(`Request ${i} succeeded`);
    } else {
      console.log(`Request ${i} failed:`, result.reason);
    }
  });
}