← Custom Promise Implementation Higher Order Functions →

Async & Await (Under the Hood)

🎯 Async/Await = Syntactic Sugar for Promises

Async/await is built on top of promises and generators. It makes asynchronous code look synchronous while maintaining non-blocking behavior.

How Async/Await Works Internally

Compilation Steps

Async function marked for transformation
Function body converted to generator
await becomes yield
Wrapper handles promise resolution
Automatic promise return

Key Components

Generator Functions: Pause/resume execution
Promise Resolution: Handles async results
State Machine: Tracks execution state
Error Propagation: Automatic try/catch

Example 1: Async/Await Internals

JavaScript Editor

// Async/Await Under the Hood

// Async function returns a Promise
async function getUser(id) {
  return { id, name: 'John' };
}

// Is equivalent to:
function getUserPromise(id) {
  return Promise.resolve({ id, name: 'John' });
}

// Await pauses execution until promise settles
async function fetchData() {
  console.log('1. Before await');
  
  const data = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Execution pauses here until fetch completes
  
  console.log('2. After await');
  const json = await data.json();
  
  console.log('3. Got JSON:', json);
  return json;
}

// Behind the scenes: Generators + Promises
function fetchDataGenerator() {
  return spawn(function*() {
    console.log('1. Before yield');
    
    const data = yield fetch('https://jsonplaceholder.typicode.com/todos/1');
    console.log('2. After yield');
    
    const json = yield data.json();
    console.log('3. Got JSON:', json);
    
    return json;
  });
}

// spawn is a helper that converts generator to async/await-like behavior
function spawn(generatorFunc) {
  return new Promise((resolve, reject) => {
    const generator = generatorFunc();
    
    function step(nextFunc) {
      let next;
      try {
        next = nextFunc();
      } catch (error) {
        reject(error);
        return;
      }
      
      if (next.done) {
        resolve(next.value);
        return;
      }
      
      Promise.resolve(next.value).then(
        value => step(() => generator.next(value)),
        error => step(() => generator.throw(error))
      );
    }
    
    step(() => generator.next());
  });
}

🔍 Async Function Transformation

// Original async function
async function example() {
  const a = await task1();
  const b = await task2(a);
  return b + 1;
}

// Transformed to generator + promise wrapper
function example() {
  return spawn(function*() {
    const a = yield task1();
    const b = yield task2(a);
    return b + 1;
  });
}

// spawn function handles promise resolution
function spawn(genF) {
  return new Promise((resolve, reject) => {
    const gen = genF();
    
    function step(nextF) {
      try {
        var next = nextF();
      } catch(e) {
        return reject(e);
      }
      
      if(next.done) {
        return resolve(next.value);
      }
      
      Promise.resolve(next.value).then(
        v => step(() => gen.next(v)),
        e => step(() => gen.throw(e))
      );
    }
    
    step(() => gen.next());
  });
}

Example 2: Advanced Error Handling

JavaScript Editor

// Error Handling in Async/Await

// Traditional try/catch
async function fetchWithErrorHandling() {
  try {
    const response = await fetch('https://invalid-url.com');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    // Return default value or rethrow
    return { default: 'value' };
  } finally {
    console.log('Fetch attempt completed');
  }
}

// Multiple await error handling
async function multipleOperations() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id); // If this fails...
    const comments = await getComments(posts[0].id); // This never runs
    
    return { user, posts, comments };
  } catch (error) {
    // Catches errors from ANY await in the try block
    console.error('Operation failed:', error);
    throw error; // Rethrow to caller
  }
}

// Individual error handling per await
async function independentOperations() {
  const userPromise = getUser().catch(() => ({ name: 'Default User' }));
  const postsPromise = getPosts().catch(() => []);
  const settingsPromise = getSettings().catch(() => ({ theme: 'light' }));
  
  // All run in parallel, failures don't stop others
  const [user, posts, settings] = await Promise.all([
    userPromise,
    postsPromise,
    settingsPromise
  ]);
  
  return { user, posts, settings };
}

// Advanced: Retry logic with async/await
async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Bad response');
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;
      console.log(`Attempt ${i + 1} failed, retrying...`);
      await sleep(1000 * (i + 1)); // Exponential backoff
    }
  }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

✅ Best Practices

Always use try/catch for error handling
Use Promise.all() for parallel independent operations
Avoid await in loops when possible
Consider using async generators for streams
Implement retry logic with exponential backoff

❌ Common Mistakes

Forgetting await keyword
Unhandled promise rejections
Sequential awaits when parallel is possible
Memory leaks with event listeners
Not cleaning up resources in finally

Example 3: Performance Optimization

JavaScript Editor

// Performance Optimization with Async/Await

// Bad: Sequential awaits (slow)
async function sequentialFetches() {
  console.time('sequential');
  
  const user = await fetch('/api/user'); // Waits...
  const posts = await fetch('/api/posts'); // Waits...
  const comments = await fetch('/api/comments'); // Waits...
  
  console.timeEnd('sequential');
  return { user, posts, comments };
}

// Good: Parallel execution
async function parallelFetches() {
  console.time('parallel');
  
  const userPromise = fetch('/api/user');
  const postsPromise = fetch('/api/posts');
  const commentsPromise = fetch('/api/comments');
  
  const [user, posts, comments] = await Promise.all([
    userPromise,
    postsPromise,
    commentsPromise
  ]);
  
  console.timeEnd('parallel');
  return { user, posts, comments };
}

// Mixed: Some sequential, some parallel
async function mixedExecution() {
  // First, get user (required for next steps)
  const user = await fetch('/api/user');
  
  // Then get user's posts and notifications in parallel
  const [posts, notifications] = await Promise.all([
    fetch(`/api/users/${user.id}/posts`),
    fetch(`/api/users/${user.id}/notifications`)
  ]);
  
  // Finally, get comments for first post
  const comments = await fetch(`/api/posts/${posts[0].id}/comments`);
  
  return { user, posts, notifications, comments };
}

// Lazy loading with async
class DataLoader {
  constructor() {
    this.cache = new Map();
  }
  
  async getData(key, fetchFn) {
    if (this.cache.has(key)) {
      return this.cache.get(key);
    }
    
    const data = await fetchFn();
    this.cache.set(key, data);
    return data;
  }
}

// Streaming data
async function* streamData(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 chunk = decoder.decode(value);
      yield chunk;
    }
  } finally {
    reader.releaseLock();
  }
}

// Usage
async function processStream() {
  for await (const chunk of streamData('/api/stream')) {
    console.log('Received chunk:', chunk);
    // Process chunk immediately
  }
}

📊 Performance Comparison

Pattern	Execution Time	Memory Usage	When to Use
Sequential awaits	Slow (sum of all)	Low	Dependent operations
Promise.all()	Fast (max of all)	Medium	Independent operations
Async generators	Streaming	Very Low	Large datasets, streams
Mixed pattern	Optimal	Medium	Complex workflows

Example 4: Advanced Async Patterns

JavaScript Editor

// Advanced Async Patterns

// 1. Async Constructor Pattern
class DatabaseConnection {
  static async create(config) {
    const connection = new DatabaseConnection(config);
    await connection.initialize();
    return connection;
  }
  
  constructor(config) {
    this.config = config;
    this.connected = false;
  }
  
  async initialize() {
    // Async initialization logic
    await this.connect();
    await this.authenticate();
    this.connected = true;
  }
  
  async connect() { /* ... */ }
  async authenticate() { /* ... */ }
}

// Usage
const db = await DatabaseConnection.create({ host: 'localhost' });

// 2. Async Iterator
class AsyncQueue {
  constructor() {
    this.values = [];
    this.resolvers = [];
    this.closed = false;
  }
  
  enqueue(value) {
    if (this.closed) throw new Error('Queue closed');
    
    if (this.resolvers.length > 0) {
      const resolve = this.resolvers.shift();
      resolve({ value, done: false });
    } else {
      this.values.push(value);
    }
  }
  
  async dequeue() {
    if (this.values.length > 0) {
      return this.values.shift();
    }
    
    if (this.closed) {
      return { done: true };
    }
    
    return new Promise(resolve => {
      this.resolvers.push(resolve);
    });
  }
  
  close() {
    this.closed = true;
    this.resolvers.forEach(resolve => resolve({ done: true }));
  }
  
  [Symbol.asyncIterator]() {
    return {
      next: () => this.dequeue()
    };
  }
}

// 3. Async Hooks/Interceptors
function createAsyncHook(asyncFn) {
  return async function(...args) {
    // Before hook
    console.time('execution');
    
    try {
      // Main execution
      const result = await asyncFn.apply(this, args);
      
      // Success hook
      console.timeEnd('execution');
      return result;
    } catch (error) {
      // Error hook
      console.error('Async function failed:', error);
      throw error;
    }
  };
}

// 4. Async Memoization
function memoizeAsync(asyncFn) {
  const cache = new Map();
  
  return async function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      console.log('Cache hit for:', key);
      return cache.get(key);
    }
    
    console.log('Cache miss for:', key);
    const result = await asyncFn.apply(this, args);
    cache.set(key, result);
    
    return result;
  };
}

// 5. Async Pool (concurrency control)
async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = [];
  const executing = [];
  
  for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(item));
    ret.push(p);
    
    if (poolLimit <= array.length) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      
      if (executing.length >= poolLimit) {
        await Promise.race(executing);
      }
    }
  }
  
  return Promise.all(ret);
}

// Usage
const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];
asyncPool(2, urls, fetchUrl);

Exercise: Implement Async Utilities

JavaScript Editor

// Implement these async utility functions

// 1. asyncMap: Map async function over array with concurrency control
async function asyncMap(array, asyncFn, concurrency = 5) {
  // Your implementation here
  // Should process array items with asyncFn
  // Control how many run concurrently
  // Return array of results in same order
}

// 2. asyncFilter: Filter array with async predicate
async function asyncFilter(array, asyncPredicate) {
  // Your implementation here
  // Should filter based on async predicate
  // Return filtered array
}

// 3. asyncReduce: Reduce array with async reducer
async function asyncReduce(array, asyncReducer, initialValue) {
  // Your implementation here
  // Should reduce array with async reducer
  // Return final value
}

// 4. asyncTimeout: Race async function with timeout
async function asyncTimeout(asyncFn, timeout, timeoutError = 'Timeout') {
  // Your implementation here
  // Should reject if asyncFn takes longer than timeout
  // Otherwise return result of asyncFn
}

// 5. asyncRetry: Retry async function with exponential backoff
async function asyncRetry(asyncFn, retries = 3, delay = 1000) {
  // Your implementation here
  // Should retry asyncFn up to retries times
  // Use exponential backoff: delay * (attempt + 1)
  // Return result or throw last error
}

// Test cases
const testArray = [1, 2, 3, 4, 5];
const asyncDouble = n => new Promise(resolve => 
  setTimeout(() => resolve(n * 2), 100)
);
const asyncIsEven = n => new Promise(resolve => 
  setTimeout(() => resolve(n % 2 === 0), 50)
);
const asyncSum = (a, b) => new Promise(resolve => 
  setTimeout(() => resolve(a + b), 50)
);

// Test your implementations
async function test() {
  console.log('Testing asyncMap...');
  const mapped = await asyncMap(testArray, asyncDouble, 2);
  console.log('Mapped:', mapped);
  
  console.log('Testing asyncFilter...');
  const filtered = await asyncFilter(testArray, asyncIsEven);
  console.log('Filtered:', filtered);
  
  console.log('Testing asyncReduce...');
  const reduced = await asyncReduce(testArray, asyncSum, 0);
  console.log('Reduced:', reduced);
}

test();

🎯 Interview Questions on Async/Await

How is async/await implemented using generators?
What happens when you forget await in an async function?
How do you handle multiple async operations in parallel?
What's the difference between async/await and Promise.then()?
How does error propagation work in async functions?
What are async generators and when would you use them?
How would you implement a rate limiter for async functions?
What happens to the call stack during await?
How do you cancel an async operation?
What's the memory overhead of async/await vs callbacks?

💡 Key Takeaways

Async/await is syntactic sugar over promises + generators
Always use try/catch for error handling
Use Promise.all() for parallel independent operations
Async functions always return promises
Consider performance implications of sequential vs parallel execution
Implement proper cleanup in finally blocks
Use async generators for streaming data

← Custom Promise Implementation Higher Order Functions →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Async & Await (Under the Hood)

🎯 Async/Await = Syntactic Sugar for Promises

How Async/Await Works Internally

Compilation Steps

Key Components

Example 1: Async/Await Internals

🔍 Async Function Transformation

Example 2: Advanced Error Handling

✅ Best Practices

❌ Common Mistakes

Example 3: Performance Optimization

📊 Performance Comparison

Example 4: Advanced Async Patterns

Exercise: Implement Async Utilities

🎯 Interview Questions on Async/Await

💡 Key Takeaways

Follow Us

Our Tools

Our Company

Special Tools