JavaScript Promises

🤝 Promise Basics

Promises represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They're essential for managing async code in JavaScript.

JavaScript Editor

// Basic Promises
console.log("=== PROMISE BASICS ===");

// Creating a promise
const simplePromise = new Promise((resolve, reject) => {
  console.log("Promise executor runs immediately!");
  
  const success = Math.random() > 0.3;
  
  setTimeout(() => {
    if (success) {
      resolve("Promise resolved successfully! 🎉");
    } else {
      reject(new Error("Promise rejected! ❌"));
    }
  }, 1000);
});

console.log("Promise created:", simplePromise);
console.log("Promise state initially:", simplePromise);

// Consuming the promise
simplePromise
  .then(result => {
    console.log("Then handler:", result);
    return result.toUpperCase();
  })
  .then(uppercaseResult => {
    console.log("Second then handler:", uppercaseResult);
  })
  .catch(error => {
    console.error("Catch handler:", error.message);
  })
  .finally(() => {
    console.log("Finally: Cleanup complete!");
  });

// Promise states demonstration
console.log("\n=== PROMISE STATES ===");

const pendingPromise = new Promise(() => {
  // Never resolves or rejects
});
console.log("Pending promise:", pendingPromise);

const resolvedPromise = Promise.resolve("Immediately resolved");
console.log("Resolved promise:", resolvedPromise);

const rejectedPromise = Promise.reject(new Error("Immediately rejected"));
console.log("Rejected promise:", rejectedPromise);

// Consume the settled promises
resolvedPromise.then(value => {
  console.log("Resolved value:", value);
});

rejectedPromise.catch(error => {
  console.log("Rejected error:", error.message);
});

// Chaining promises
console.log("\n=== PROMISE CHAINING ===");

Promise.resolve(10)
  .then(value => {
    console.log("Step 1:", value);
    return value * 2;
  })
  .then(value => {
    console.log("Step 2:", value);
    return value + 5;
  })
  .then(value => {
    console.log("Step 3:", value);
    return new Promise(resolve => {
      setTimeout(() => resolve(value * 3), 500);
    });
  })
  .then(value => {
    console.log("Final result:", value);
  });

// Error handling in chains
console.log("\n=== ERROR HANDLING CHAINS ===");

Promise.resolve(5)
  .then(value => {
    console.log("Step 1:", value);
    if (value > 3) {
      throw new Error("Value too high!");
    }
    return value * 2;
  })
  .then(value => {
    console.log("This won't execute due to error above");
    return value;
  })
  .catch(error => {
    console.log("Caught error:", error.message);
    return 0; // Recover from error
  })
  .then(value => {
    console.log("After recovery:", value);
  });

// Multiple promise handlers
console.log("\n=== MULTIPLE HANDLERS ===");

const basePromise = Promise.resolve("Original");

basePromise.then(value => console.log("Handler 1:", value));
basePromise.then(value => console.log("Handler 2:", value.toUpperCase()));

setTimeout(() => {
  basePromise.then(value => console.log("Handler 3 (delayed):", value));
}, 100);

Promise States:

Pending - Initial state
Fulfilled - Operation completed successfully
Rejected - Operation failed

Promise Methods:

.then() - Handle fulfillment
.catch() - Handle rejection
.finally() - Execute always

🔧 Promise Static Methods

The Promise API provides several static methods for working with multiple promises. These are essential for complex async operations.

JavaScript Editor

// Promise Static Methods
console.log("=== PROMISE STATIC METHODS ===");

// Promise.all() - Wait for all promises
console.log("\n=== Promise.all() ===");

const promises = [
  new Promise(resolve => setTimeout(() => resolve("Task 1"), 1000)),
  new Promise(resolve => setTimeout(() => resolve("Task 2"), 500)),
  new Promise(resolve => setTimeout(() => resolve("Task 3"), 1500))
];

Promise.all(promises)
  .then(results => {
    console.log("All promises resolved:", results);
    console.log("Total time: ~1500ms (waits for slowest)");
  })
  .catch(error => {
    console.error("One promise rejected:", error);
  });

// Promise.all() with rejection
const mixedPromises = [
  Promise.resolve("Success 1"),
  Promise.reject(new Error("Failed!")),
  Promise.resolve("Success 2")
];

Promise.all(mixedPromises)
  .then(results => {
    console.log("This won't execute due to rejection");
  })
  .catch(error => {
    console.log("Promise.all catches first rejection:", error.message);
  });

// Promise.allSettled() - Wait for all to settle
console.log("\n=== Promise.allSettled() ===");

Promise.allSettled(mixedPromises)
  .then(results => {
    console.log("All settled:", results);
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Promise ${index}: ${result.value}`);
      } else {
        console.log(`Promise ${index}: ${result.reason.message}`);
      }
    });
  });

// Promise.race() - First to settle wins
console.log("\n=== Promise.race() ===");

const racers = [
  new Promise(resolve => setTimeout(() => resolve("Fast"), 300)),
  new Promise(resolve => setTimeout(() => resolve("Medium"), 600)),
  new Promise((_, reject) => setTimeout(() => reject(new Error("Slow")), 900))
];

Promise.race(racers)
  .then(winner => {
    console.log("Race winner:", winner);
  })
  .catch(error => {
    console.log("Race rejected:", error.message);
  });

// Promise.any() - First to fulfill (ignores rejections)
console.log("\n=== Promise.any() ===");

const anyPromises = [
  new Promise((_, reject) => setTimeout(() => reject("Error 1"), 100)),
  new Promise(resolve => setTimeout(() => resolve("Success 1"), 200)),
  new Promise((_, reject) => setTimeout(() => reject("Error 2"), 300)),
  new Promise(resolve => setTimeout(() => resolve("Success 2"), 400))
];

Promise.any(anyPromises)
  .then(firstSuccess => {
    console.log("First successful promise:", firstSuccess);
  })
  .catch(error => {
    console.log("All promises rejected:", error.errors);
  });

// Promise.resolve() and Promise.reject()
console.log("\n=== Promise.resolve() & Promise.reject() ===");

const cachedValue = Promise.resolve(42);
cachedValue.then(value => console.log("Resolved value:", value));

const immediateError = Promise.reject(new Error("Something went wrong"));
immediateError.catch(error => console.log("Rejected:", error.message));

// Converting callbacks to promises
console.log("\n=== CONVERTING CALLBACKS ===");

// Traditional callback function
function traditionalCallback(value, callback) {
  setTimeout(() => {
    if (value > 0) {
      callback(null, value * 2);
    } else {
      callback(new Error("Value must be positive"), null);
    }
  }, 100);
}

// Convert to promise-based function
function promiseBased(value) {
  return new Promise((resolve, reject) => {
    traditionalCallback(value, (error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });
  });
}

// Use the promise-based version
promiseBased(5)
  .then(result => console.log("Promise result:", result))
  .catch(error => console.log("Promise error:", error.message));

Static Methods:

Promise.all() - All must succeed
Promise.allSettled() - Wait for all
Promise.race() - First to settle
Promise.any() - First to succeed

Use Cases:

Promise.all() - Parallel independent requests
Promise.race() - Timeout pattern
Promise.any() - Multiple fallback sources
Promise.allSettled() - Batch processing

🔄 Async Operations

Promises shine when dealing with real-world async operations like API calls, file reading, or database queries. Here are practical patterns and examples.

JavaScript Editor

// Async Operations with Promises
console.log("=== ASYNC OPERATIONS ===");

// Simulating API calls
console.log("\n=== SIMULATED API CALLS ===");

// Sequential API calls
console.log("\n=== SEQUENTIAL REQUESTS ===");

simulateAPI('/api/users', 800)
  .then(users => {
    console.log("✅ Received:", users);
    return simulateAPI('/api/posts', 600);
  })
  .then(posts => {
    console.log("✅ Received:", posts);
    return simulateAPI('/api/comments', 400);
  })
  .then(comments => {
    console.log("✅ Received:", comments);
    console.log("🎯 All sequential calls complete!");
  })
  .catch(error => {
    console.error("❌ Error in sequence:", error.message);
  });

// Parallel API calls
console.log("\n=== PARALLEL REQUESTS ===");

const parallelCalls = [
  simulateAPI('/api/profile', 1200),
  simulateAPI('/api/settings', 800),
  simulateAPI('/api/notifications', 1000)
];

Promise.all(parallelCalls)
  .then(results => {
    console.log("📊 Parallel results:", results);
    console.log("⏱️ Total time: ~1200ms (slowest request)");
  })
  .catch(error => {
    console.error("Parallel error:", error.message);
  });

// Real-world example: User dashboard
console.log("\n=== USER DASHBOARD EXAMPLE ===");

fetchUserData(123)
  .then(dashboardData => {
    console.log("📊 Dashboard data loaded:");
    console.log("- User:", dashboardData.user);
    console.log("- Posts:", dashboardData.posts.length, "posts");
    console.log("- Friends:", dashboardData.friends.length, "friends");
    console.log("- Loaded at:", dashboardData.timestamp);
  })
  .catch(error => {
    console.error("❌ Failed to load dashboard:", error.message);
  });

// Error recovery patterns
console.log("\n=== ERROR RECOVERY ===");

fetchWithRetry('/api/important-data', 3)
  .then(data => {
    console.log("✅ Finally got data:", data);
  })
  .catch(error => {
    console.error("❌ Ultimate failure:", error.message);
  });

// Timeout pattern
console.log("\n=== TIMEOUT PATTERN ===");

fetchWithTimeout('/api/slow-endpoint', 2000)
  .then(data => {
    console.log("✅ Got data before timeout:", data);
  })
  .catch(error => {
    console.log("❌", error.message); // Will timeout after 2s
  });

// Batch processing
console.log("\n=== BATCH PROCESSING ===");

function processInBatches(items, batchSize, processItem) {
  const batches = [];
  
  for (let i = 0; i < items.length; i += batchSize) {
    const batch = items.slice(i, i + batchSize);
    const batchPromise = Promise.all(batch.map(processItem));
    batches.push(batchPromise);
  }
  
  return Promise.all(batches)
    .then(results => results.flat());
}

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const processItem = item => 
  simulateAPI(`/process/${item}`, Math.random() * 500);

processInBatches(items, 3, processItem)
  .then(results => {
    console.log(`✅ Processed ${results.length} items in batches of 3`);
  })
  .catch(error => {
    console.error("Batch processing error:", error);
  });

💡 Performance Tips:

Use parallel requests for independent data
Use sequential requests for dependent data
Implement retry logic for flaky operations
Add timeouts to prevent hanging requests
Consider batching for large operations

⚡ Advanced Promise Patterns

For production applications, you'll need advanced patterns like memoization, concurrency control, cancellable promises, and state machines.

JavaScript Editor

// Advanced Promise Patterns
console.log("=== ADVANCED PROMISE PATTERNS ===");

// 1. Promise Memoization/Caching
console.log("\n=== PROMISE MEMOIZATION ===");

const memoizedFetch = createMemoizedFetch('/api/config');
memoizedFetch().then(() => console.log("First call complete"));
memoizedFetch().then(() => console.log("Second call complete (cached)"));

// 2. Promise Pool (Concurrency Control)
console.log("\n=== PROMISE POOL (CONCURRENCY CONTROL) ===");

class PromisePool {
  constructor(maxConcurrent = 3) {
    this.maxConcurrent = maxConcurrent;
    this.pending = [];
    this.running = 0;
  }
  
  async add(promiseFactory) {
    return new Promise((resolve, reject) => {
      this.pending.push({ promiseFactory, resolve, reject });
      this.run();
    });
  }
  
  run() {
    while (this.running < this.maxConcurrent && this.pending.length > 0) {
      const task = this.pending.shift();
      this.running++;
      
      task.promiseFactory()
        .then(result => {
          this.running--;
          task.resolve(result);
          this.run();
        })
        .catch(error => {
          this.running--;
          task.reject(error);
          this.run();
        });
    }
  }
}

// Usage
const pool = new PromisePool(2); // Max 2 concurrent
const tasks = [];

for (let i = 1; i <= 5; i++) {
  const task = pool.add(() => 
    simulateAPI(`/task/${i}`, Math.random() * 1000 + 500)
  );
  tasks.push(task);
}

Promise.all(tasks)
  .then(results => {
    console.log(`✅ All ${results.length} tasks completed with concurrency control`);
  });

// 3. Cancellable Promises
console.log("\n=== CANCELLABLE PROMISES ===");

const { promise: longRunning, cancel } = createCancellablePromise((resolve, reject) => {
  const timeout = setTimeout(() => resolve("Long operation complete"), 3000);
  
  // Cleanup on cancel
  return () => clearTimeout(timeout);
});

longRunning
  .then(result => console.log("Long running result:", result))
  .catch(error => console.log("Cancelled:", error.message));

// Cancel after 1 second
setTimeout(() => {
  console.log("Cancelling long running operation...");
  cancel("User cancelled");
}, 1000);

// 4. Promise-based Queue
console.log("\n=== PROMISE-BASED QUEUE ===");

class AsyncQueue {
  constructor() {
    this.queue = [];
    this.pending = null;
  }
  
  enqueue(item) {
    return new Promise((resolve, reject) => {
      this.queue.push({ item, resolve, reject });
      this.process();
    });
  }
  
  process() {
    if (this.pending || this.queue.length === 0) return;
    
    const { item, resolve, reject } = this.queue.shift();
    this.pending = { resolve, reject };
    
    // Simulate processing
    simulateAPI(`/process/${item}`, 500)
      .then(result => {
        this.pending.resolve(result);
        this.pending = null;
        this.process();
      })
      .catch(error => {
        this.pending.reject(error);
        this.pending = null;
        this.process();
      });
  }
}

// Usage
const queue = new AsyncQueue();

[1, 2, 3, 4].forEach(num => {
  queue.enqueue(num)
    .then(result => console.log(`Processed ${num}: ${result}`))
    .catch(error => console.log(`Failed ${num}: ${error.message}`));
});

// 5. Promise-based State Machine
console.log("\n=== PROMISE STATE MACHINE ===");

class PromiseStateMachine {
  constructor(states) {
    this.states = states;
    this.current = 0;
  }
  
  async run(initialData) {
    let data = initialData;
    
    for (let i = 0; i < this.states.length; i++) {
      const state = this.states[i];
      console.log(`Entering state: ${state.name}`);
      
      try {
        data = await state.transition(data);
        console.log(`State ${state.name} completed`);
      } catch (error) {
        if (state.onError) {
          console.log(`State ${state.name} failed, handling error`);
          data = await state.onError(error, data);
        } else {
          throw error;
        }
      }
    }
    
    return data;
  }
}

// Define states
const checkoutMachine = new PromiseStateMachine([
  {
    name: 'ValidateCart',
    transition: (cart) => simulateAPI('/validate-cart', 500, false).then(() => cart)
  },
  {
    name: 'ProcessPayment',
    transition: (cart) => simulateAPI('/process-payment', 800, false).then(() => cart),
    onError: (error, cart) => {
      console.log("Payment failed, retrying...");
      return simulateAPI('/process-payment', 300).then(() => cart);
    }
  },
  {
    name: 'CreateOrder',
    transition: (cart) => simulateAPI('/create-order', 600).then(() => 'Order created!')
  }
]);

checkoutMachine.run({ items: ['item1', 'item2'], total: 99.99 })
  .then(result => console.log("Checkout result:", result))
  .catch(error => console.error("Checkout failed:", error.message));

Advanced Patterns:

Memoization - Cache promise results
Promise Pool - Control concurrency
Cancellable Promises - Allow cancellation
Promise Queue - Sequential processing

Common Issues:

Memory leaks from unhandled promises
Uncaught promise rejections
Promise constructor anti-pattern
Overly nested promise chains

Best Practices:

Always return promises from .then()
Handle errors at appropriate levels
Use async/await for readability
Avoid promise constructor when possible

📋 Promise Anti-Patterns to Avoid

❌ Don't Do This:

Creating promises unnecessarily (promise constructor anti-pattern)
Nesting promises instead of chaining
Forgetting to return promises from .then() handlers
Not handling promise rejections
Using promises for synchronous operations

✅ Do This Instead:

Use Promise.resolve() for known values
Chain promises with .then() returns
Always handle errors with .catch()
Use async/await for better readability
Convert callbacks to promises with util.promisify()

← ES6 Features Async & Await →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

JavaScript Promises

🤝 Promise Basics

Promise States:

Promise Methods:

🔧 Promise Static Methods

Static Methods:

Use Cases:

🔄 Async Operations

💡 Performance Tips:

⚡ Advanced Promise Patterns

Advanced Patterns:

Common Issues:

Best Practices:

📋 Promise Anti-Patterns to Avoid

❌ Don't Do This:

✅ Do This Instead:

Follow Us

Our Tools

Our Company

Special Tools