JavaScript Promises and Async/Await: A Deep Dive into Modern Asynchronous Programming

// Basic Promise creation and usage
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve({ data: 'User information', timestamp: Date.now() });
      } else {
        reject(new Error('Failed to fetch data'));
      }
    }, 1000);
  });
};

// Using Promise with .then() and .catch()
fetchData()
  .then(response => {
    console.log('Success:', response);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

// Sequential promise chaining
const fetchUser = userId => 
  fetch(`/api/users/${userId}`)
    .then(response => response.json());

const fetchUserPosts = userId => 
  fetch(`/api/users/${userId}/posts`)
    .then(response => response.json());

const fetchUserComments = userId => 
  fetch(`/api/users/${userId}/comments`)
    .then(response => response.json());

// Chain promises sequentially
fetchUser(123)
  .then(user => {
    console.log('User:', user);
    return fetchUserPosts(user.id);
  })
  .then(posts => {
    console.log('Posts:', posts);
    return fetchUserComments(posts[0].userId);
  })
  .then(comments => {
    console.log('Comments:', comments);
  })
  .catch(error => {
    console.error('Chain error:', error.message);
  });

// Execute multiple promises concurrently
const fetchMultipleData = async () => {
  try {
    const [users, posts, comments] = await Promise.all([
      fetch('/api/users').then(r => r.json()),
      fetch('/api/posts').then(r => r.json()),
      fetch('/api/comments').then(r => r.json())
    ]);
    
    return {
      users,
      posts,
      comments
    };
  } catch (error) {
    console.error('Parallel fetch failed:', error);
    throw error;
  }
};

// Handle failures gracefully with Promise.allSettled
const fetchWithFallback = async () => {
  const results = await Promise.allSettled([
    fetch('/api/primary').then(r => r.json()),
    fetch('/api/secondary').then(r => r.json()),
    fetch('/api/backup').then(r => r.json())
  ]);
  
  // Process results regardless of success/failure
  const successful = results
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value);
    
  return successful[0] || null; // Return first successful result
};

// Custom error handling with retry logic
class ApiError extends Error {
  constructor(message, status, url) {
    super(message);
    this.name = 'ApiError';
    this.status = status;
    this.url = url;
  }
}

const fetchWithRetry = async (url, retries = 3, delay = 1000) => {
  for (let i = 0; i <= retries; i++) {
    try {
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new ApiError(
          `HTTP ${response.status}: ${response.statusText}`,
          response.status,
          url
        );
      }
      
      return await response.json();
    } catch (error) {
      if (i === retries) throw error;
      
      console.log(`Retry attempt ${i + 1} for ${url}`);
      await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, i)));
    }
  }
};

// Usage with proper error handling
async function loadUserData(userId) {
  try {
    const user = await fetchWithRetry(`/api/users/${userId}`);
    const posts = await fetchWithRetry(`/api/users/${userId}/posts`);
    
    return { user, posts };
  } catch (error) {
    if (error instanceof ApiError) {
      console.error(`API Error: ${error.message} (${error.url})`);
    } else {
      console.error('Unexpected error:', error);
    }
    throw error;
  }
}

// Complex async data processing with validation
class DataProcessor {
  constructor() {
    this.cache = new Map();
  }
  
  async fetchAndValidate(url) {
    // Check cache first
    if (this.cache.has(url)) {
      return this.cache.get(url);
    }
    
    try {
      const response = await fetch(url);
      const data = await response.json();
      
      // Validate data structure
      if (!this.validateData(data)) {
        throw new Error('Invalid data structure received');
      }
      
      // Cache validated data
      this.cache.set(url, data);
      return data;
    } catch (error) {
      console.error(`Failed to process ${url}:`, error.message);
      throw error;
    }
  }
  
  validateData(data) {
    return data && 
           typeof data === 'object' && 
           Array.isArray(data.items) &&
           data.items.length > 0;
  }
  
  async processMultipleSources(sources) {
    try {
      // Process sources in parallel
      const results = await Promise.allSettled(
        sources.map(source => this.fetchAndValidate(source.url))
      );
      
      // Transform and organize results
      return results
        .filter(result => result.status === 'fulfilled')
        .map(result => ({
          source: result.value.source,
          data: result.value.items,
          timestamp: Date.now()
        }));
    } catch (error) {
      console.error('Processing pipeline failed:', error);
      throw error;
    }
  }
}

// Usage example
const processor = new DataProcessor();
const sources = [
  { url: '/api/data1', source: 'primary' },
  { url: '/api/data2', source: 'secondary' },
  { url: '/api/data3', source: 'backup' }
];

processor.processMultipleSources(sources)
  .then(results => {
    console.log('Processed data:', results);
  })
  .catch(error => {
    console.error('Pipeline error:', error);
  });

// Memory-efficient streaming data processing
class StreamProcessor {
  constructor(maxConcurrent = 5) {
    this.maxConcurrent = maxConcurrent;
    this.running = 0;
    this.queue = [];
  }
  
  async processStream(items, processor) {
    const results = [];
    
    // Process items with concurrency control
    for (const item of items) {
      const result = await this.processWithLimit(() => 
        processor(item)
      );
      results.push(result);
    }
    
    return results;
  }
  
  async processWithLimit(promiseFn) {
    return new Promise((resolve, reject) => {
      const task = () => {
        this.running++;
        promiseFn()
          .then(resolve)
          .catch(reject)
          .finally(() => {
            this.running--;
            this.processQueue();
          });
      };
      
      if (this.running < this.maxConcurrent) {
        task();
      } else {
        this.queue.push(task);
      }
    });
  }
  
  processQueue() {
    if (this.queue.length > 0 && this.running < this.maxConcurrent) {
      const task = this.queue.shift();
      task();
    }
  }
}

// Usage example
const streamProcessor = new StreamProcessor(3);
const largeDataset = Array.from({ length: 100 }, (_, i) => ({ id: i }));

streamProcessor.processStream(largeDataset, async (item) => {
  // Simulate async processing
  await new Promise(resolve => setTimeout(resolve, 100));
  return { ...item, processed: true };
})
.then(results => {
  console.log('Stream processing completed:', results.length, 'items');
});

// Best practices implementation
const bestPracticeExample = async () => {
  // 1. Always handle errors properly
  try {
    const data = await fetch('/api/data').then(r => r.json());
    return data;
  } catch (error) {
    // Log error appropriately
    console.error('API call failed:', error);
    throw new Error('Failed to load data');
  }
  
  // 2. Use Promise.all for concurrent operations
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  
  // 3. Implement timeout handling
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Request timeout')), 5000);
  });
  
  const data = await Promise.race([
    fetch('/api/data').then(r => r.json()),
    timeoutPromise
  ]);
};