Promises and the Event Loop

Lesson Overview

JavaScript's asynchronous nature is powered by the event loop and promises. Understanding these concepts is crucial for handling operations like API calls, file operations, and timers.

What You'll Learn:

• Synchronous vs asynchronous execution
• The JavaScript event loop
• Creating and consuming promises
• Promise states and chaining
• Error handling in promises
• Microtasks and macrotasks

Key Concepts:

• JavaScript is single-threaded but non-blocking
• Event loop manages asynchronous operations
• Promises represent future values
• Proper error handling prevents unhandled rejections

---

Introduction to Asynchronous JavaScript

JavaScript is a single-threaded language, meaning it can only execute one piece of code at a time. However, it can handle asynchronous operations efficiently through the event loop mechanism. This allows JavaScript to perform long-running operations without blocking the main thread.

Synchronous vs Asynchronous Execution

In synchronous programming, tasks are executed one after another. Each task must complete before the next one begins. This can lead to performance issues when dealing with time-consuming operations like network requests or file I/O.

// Synchronous execution
console.log('Start');
console.log('Middle');
console.log('End');
// Output: Start, Middle, End

Asynchronous programming allows tasks to run in the background, enabling the main thread to continue executing other code while waiting for operations to complete.

// Asynchronous execution
console.log('Start');
setTimeout(() => console.log('Async task'), 1000);
console.log('End');
// Output: Start, End, Async task (after 1 second)

---

The JavaScript Event Loop

The event loop is the fundamental mechanism that makes JavaScript's asynchronous behavior possible. It continuously checks the call stack and the task queue, executing tasks from the queue when the call stack is empty.

How the Event Loop Works

1. Call Stack: Where function calls are stacked and executed
2. Task Queue: Where asynchronous tasks are queued
3. Microtask Queue: Higher priority queue for promise callbacks
4. Event Loop: Monitors the call stack and task queues

The event loop follows these steps:

1. Execute all tasks in the call stack
2. When the call stack is empty, check the microtask queue
3. Execute all microtasks
4. Check the task queue and execute one task
5. Repeat the process

console.log('1');

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

Promise.resolve().then(() => console.log('3'));

console.log('4');
// Output: 1, 4, 3, 2

Macrotasks vs Microtasks

Macrotasks include:

• setTimeout/setInterval
• I/O operations
• UI rendering
• requestAnimationFrame

Microtasks include:

• Promise callbacks (.then, .catch, .finally)
• queueMicrotask()
• MutationObserver callbacks

Microtasks have higher priority and are executed before macrotasks in each event loop cycle.

---

Understanding Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It serves as a placeholder for a value that may not be available yet.

Promise States

Promises can be in one of three states:

1. Pending: Initial state, neither fulfilled nor rejected
2. Fulfilled: Operation completed successfully
3. Rejected: Operation failed

Once a promise is fulfilled or rejected, it becomes immutable and cannot change state again.

Creating Promises

You can create a promise using the Promise constructor:

const promise = new Promise((resolve, reject) => {
  // Asynchronous operation
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Operation successful');
    } else {
      reject('Operation failed');
    }
  }, 1000);
});

Consuming Promises

Use .then() for successful completion and .catch() for errors:

promise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('Cleanup'));

---

Promise Chaining

Promise chaining allows you to sequence asynchronous operations in a clean, readable way. Each .then() returns a new promise, enabling you to chain multiple operations.

Basic Chaining

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => processPosts(posts))
  .then(processed => displayResults(processed))
  .catch(error => handleError(error));

Returning Values

When you return a value from .then(), it becomes the fulfillment value of the next promise:

Promise.resolve(5)
  .then(value => value * 2)
  .then(value => value + 3)
  .then(result => console.log(result)); // 13

Returning Promises

When you return a promise from .then(), the chain waits for that promise to resolve:

function fetchUserData(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`/api/posts/${user.id}`);
    })
    .then(response => response.json());
}

---

Error Handling in Promises

Proper error handling is crucial for robust asynchronous code. Promises provide multiple ways to handle errors.

Using .catch()

The .catch() method handles any rejected promises in the chain:

doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .catch(error => {
    console.error('Error in promise chain:', error);
    return defaultValue; // Return a fallback value
  });

Multiple .catch() Handlers

You can have multiple .catch() handlers to handle errors at different stages:

fetchData()
  .then(data => processData(data))
  .catch(error => {
    console.error('Processing error:', error);
    return fallbackData;
  })
  .then(result => saveData(result))
  .catch(error => {
    console.error('Save error:', error);
  });

Throwing Errors in .then()

You can throw errors in .then() callbacks, which will be caught by the nearest .catch():

Promise.resolve()
  .then(() => {
    throw new Error('Something went wrong');
  })
  .catch(error => {
    console.error('Caught error:', error.message);
  });

---

Promise Static Methods

JavaScript provides several static methods for working with promises.

Promise.all()

Promise.all() takes an array of promises and returns a single promise that resolves when all input promises resolve:

const promise1 = fetch('/api/users');
const promise2 = fetch('/api/posts');
const promise3 = fetch('/api/comments');

Promise.all([promise1, promise2, promise3])
  .then(responses => {
    console.log('All requests completed');
    return Promise.all(responses.map(r => r.json()));
  })
  .then(data => {
    const [users, posts, comments] = data;
    // Process all data
  })
  .catch(error => {
    console.error('One or more requests failed:', error);
  });

Promise.race()

Promise.race() returns a promise that resolves or rejects as soon as one of the input promises resolves or rejects:

const timeout = new Promise((_, reject) => {
  setTimeout(() => reject(new Error('Timeout')), 5000);
});

const fetchData = fetch('/api/data');

Promise.race([fetchData, timeout])
  .then(response => console.log('Data received'))
  .catch(error => console.error('Request failed or timed out'));

Promise.allSettled()

Promise.allSettled() waits for all promises to settle (either resolve or reject) and returns an array of objects describing the outcome:

const promises = [
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
];

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

Promise.resolve() and Promise.reject()

These methods create already resolved or rejected promises:

const resolvedPromise = Promise.resolve('Success');
const rejectedPromise = Promise.reject(new Error('Failure'));

resolvedPromise.then(value => console.log(value)); // 'Success'
rejectedPromise.catch(error => console.error(error.message)); // 'Failure'

---

Advanced Promise Patterns

Promise Composition

You can compose promises to create complex asynchronous workflows:

function fetchUserWithPosts(userId) {
  return fetch(`/api/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`/api/posts?userId=${user.id}`)
        .then(response => response.json())
        .then(posts => ({ user, posts }));
    });
}

Sequential vs Parallel Execution

Sequential execution (one after another):

async function sequential() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);
  const comments = await fetchComments(posts[0].id);
  return { user, posts, comments };
}

Parallel execution (all at once):

async function parallel() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
  ]);
  return { user, posts, comments };
}

Retry Pattern

Implement a retry mechanism for failed operations:

function fetchWithRetry(url, maxRetries = 3) {
  return new Promise((resolve, reject) => {
    let retries = 0;
    
    function attemptFetch() {
      fetch(url)
        .then(response => {
          if (!response.ok) throw new Error('Network error');
          return response.json();
        })
        .then(resolve)
        .catch(error => {
          retries++;
          if (retries <= maxRetries) {
            setTimeout(attemptFetch, 1000 * retries);
          } else {
            reject(error);
          }
        });
    }
    
    attemptFetch();
  });
}

---

Microtasks and the Event Loop

Understanding microtasks is crucial for predicting the execution order of asynchronous code.

Microtask Queue Behavior

Microtasks are processed after each macrotask and before the next macrotask begins:

console.log('1');

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

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

Promise.resolve().then(() => console.log('5'));

console.log('6');
// Output: 1, 6, 3, 5, 4, 2

queueMicrotask()

You can explicitly queue a microtask using queueMicrotask():

console.log('Start');

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

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

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

console.log('End');
// Output: Start, End, Microtask 1, Microtask 2, Macrotask

---

Common Promise Pitfalls

Unhandled Promise Rejections

Always handle promise rejections to avoid unhandled rejection warnings:

// Bad - unhandled rejection
fetch('/api/data');

// Good - handle rejection
fetch('/api/data').catch(error => {
  console.error('Fetch failed:', error);
});

Promise Anti-patterns

Callback Hell to Promise Hell:

// Bad - nested promises
fetchUser()
  .then(user => {
    fetchPosts(user.id)
      .then(posts => {
        fetchComments(posts[0].id)
          .then(comments => {
            // Deep nesting
          });
      });
  });

// Good - flat chaining
fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => {
    // Flat structure
  });

Forgetting to Return

Always return promises in .then() callbacks when you want to chain them:

// Bad - doesn't wait for inner promise
fetchUser()
  .then(user => {
    fetchPosts(user.id); // Missing return
  })
  .then(posts => {
    // posts is undefined
  });

// Good - returns the promise
fetchUser()
  .then(user => {
    return fetchPosts(user.id);
  })
  .then(posts => {
    // posts is available
  });

---

Best Practices

1. Always Handle Errors

// Always include error handling
promise
  .then(result => processResult(result))
  .catch(error => handleError(error));

2. Use Promise.all() for Independent Operations

// When operations don't depend on each other
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments()
]);

3. Prefer Async/Await for Complex Logic

While promises are fundamental, async/await often provides better readability for complex asynchronous flows.

4. Avoid Mixing Callbacks and Promises

Choose one paradigm and stick with it for consistency:

// Bad - mixing paradigms
fs.readFile('file.txt', (err, data) => {
  if (err) throw err;
  Promise.resolve(data.toString())
    .then(content => processContent(content));
});

// Good - promise-based
const content = await fs.promises.readFile('file.txt', 'utf8');
await processContent(content);

---

Summary

The event loop and promises form the foundation of asynchronous JavaScript. Understanding these concepts enables you to:

• Write non-blocking code that performs efficiently
• Handle complex asynchronous workflows with confidence
• Debug timing-related issues effectively
• Create robust error handling for async operations

Key takeaways:

• JavaScript uses the event loop to manage asynchronous operations
• Promises represent future values and have three states: pending, fulfilled, rejected
• Microtasks have higher priority than macrotasks in the event loop
• Proper error handling prevents unhandled promise rejections
• Promise chaining enables clean, readable asynchronous code

Mastering these concepts will significantly improve your ability to build responsive, efficient JavaScript applications.