Part 2: Asynchronous JavaScript in Depth: The Event Loop, Promises & Async/Await

console.log('1. Synchronous Start');

setTimeout(() => {
  console.log('2. Macrotask (setTimeout)');
}, 0);

Promise.resolve().then(() => {
  console.log('3. Microtask (Promise 1)');
}).then(() => {
  console.log('4. Microtask (Promise 2)');
});

queueMicrotask(() => {
  console.log('5. Microtask (queueMicrotask)');
});

console.log('6. Synchronous End');

/* Output Execution Sequence:
 * 1. Synchronous Start
 * 6. Synchronous End
 * 3. Microtask (Promise 1)
 * 5. Microtask (queueMicrotask)
 * 4. Microtask (Promise 2)  <-- Chained microtask executed BEFORE any macrotask!
 * 2. Macrotask (setTimeout) <-- Only runs after Microtask queue is totally drained!
 */

/**
 * Minimal Educational Promise Implementation
 */
class CustomPromise {
  constructor(executor) {
    this.state = 'pending'; // 'pending' | 'fulfilled' | 'rejected'
    this.value = undefined;
    this.handlers = [];

    const resolve = (val) => {
      if (this.state !== 'pending') return;
      this.state = 'fulfilled';
      this.value = val;
      // Schedule microtasks
      queueMicrotask(() => {
        this.handlers.forEach(h => h.onFulfilled(val));
      });
    };

    const reject = (err) => {
      if (this.state !== 'pending') return;
      this.state = 'rejected';
      this.value = err;
      queueMicrotask(() => {
        this.handlers.forEach(h => h.onRejected(err));
      });
    };

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }

  then(onFulfilled, onRejected) {
    return new CustomPromise((resolve, reject) => {
      const handle = {
        onFulfilled: (val) => {
          if (!onFulfilled) return resolve(val);
          try { resolve(onFulfilled(val)); } catch (e) { reject(e); }
        },
        onRejected: (err) => {
          if (!onRejected) return reject(err);
          try { resolve(onRejected(err)); } catch (e) { reject(e); }
        }
      };

      if (this.state === 'pending') {
        this.handlers.push(handle);
      } else {
        queueMicrotask(() => {
          if (this.state === 'fulfilled') handle.onFulfilled(this.value);
          else handle.onRejected(this.value);
        });
      }
    });
  }
}

/* ANTI-PATTERN: Accidental Sequential Waterfall (Takes 3000ms) */
async function fetchDashboardSlow() {
  const user = await fetchUser();     // Takes 1000ms
  const posts = await fetchPosts();   // Takes 1000ms (Waits unnecessarily!)
  const stats = await fetchStats();   // Takes 1000ms (Waits unnecessarily!)
  return { user, posts, stats };
}

/* OPTIMIZED PATTERN: True Parallel Dispatch (Takes only 1000ms total!) */
async function fetchDashboardFast() {
  // Fire all requests concurrently into the background Web API thread pool
  const [user, posts, stats] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchStats()
  ]);
  return { user, posts, stats };
}

/**
 * Robust Fetch Utility with Automated Timeout and Cancellation
 */
async function fetchWithTimeout(url, timeoutMs = 5000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);

  try {
    const response = await fetch(url, {
      signal: controller.signal // Passes cancellation token to network layer
    });
    if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error(`Request timed out after ${timeoutMs}ms`);
    }
    throw error;
  } finally {
    clearTimeout(timer); // Free timer hardware resource
  }
}

/**
 * Consuming a ReadableStream chunk by chunk using Async Iteration
 */
async function streamAIResponse(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const textChunk = decoder.decode(value, { stream: true });
      // Instantly append chunk to UI without waiting for entire response
      renderLiveToken(textChunk);
    }
  } finally {
    reader.releaseLock();
  }
}

/* Main Thread Script */
const worker = new Worker(new URL('./data-worker.js', import.meta.url));

// Send heavy data to background thread
worker.postMessage({ rawDataset: hugeDataArray });

// Receive calculated result without ever locking the UI thread!
worker.onmessage = (event) => {
  const { processedResult } = event.data;
  renderChart(processedResult);
};

/* Inside data-worker.js (Runs on background thread) */
self.onmessage = (event) => {
  const { rawDataset } = event.data;
  const processed = heavyDataProcessingAlgorithm(rawDataset);
  self.postMessage({ processedResult: processed });
};

/**
 * Robust Asynchronous Retry with Exponential Backoff and Jitter
 */
async function retryWithBackoff(fn, retries = 3, baseDelayMs = 300) {
  try {
    return await fn();
  } catch (error) {
    if (retries === 0) throw error;
    // Calculate exponential delay: base * 2^attempt + randomized jitter
    const delay = Math.random() * (baseDelayMs * Math.pow(2, 3 - retries));
    console.warn(`Request failed (${error.message}). Retrying in ${Math.round(delay)}ms...`);
    await new Promise(res => setTimeout(res, delay));
    return retryWithBackoff(fn, retries - 1, baseDelayMs);
  }
}