Master JavaScript async/await: 3 Patterns to Save Hours

The Pain of Sequential Asynchronous Operations

Remember the days of nested `.then()` calls? Fetching user data, then their posts, then comments on those posts? It was a tangled mess, prone to errors and difficult to read. While `async/await` fundamentally changed how we write asynchronous JavaScript, many developers still struggle with optimizing its use, particularly when dealing with multiple, dependent, or independent asynchronous tasks. The goal is not just to avoid callbacks, but to write efficient, readable, and maintainable asynchronous code. This means understanding when to run tasks in parallel, when to wait for sequential completion, and how to handle errors robustly.

Consider a common scenario: a user profile page that needs to load the user's basic information, their recent activity feed, and their social media connections. Each of these requires a separate API call. Doing them one after another (`await fetchUser(); await fetchActivity(); await fetchConnections();`) is inefficient. The browser sits idle, waiting for each call to complete before initiating the next. This can lead to a sluggish user experience, especially on slower networks.

Pattern 1: Parallel Execution with `Promise.all()`

The most common inefficiency stems from treating independent asynchronous operations as if they were sequential. If you need data from multiple APIs, and the result of one call doesn't depend on the result of another, you should fetch them concurrently. This is where `Promise.all()` shines.

Promise.all() takes an iterable (like an array) of Promises and returns a single Promise. This new Promise resolves when all of the Promises in the iterable have resolved. The resolved value is an array containing the resolved values of the input Promises, in the same order.

Let's revisit the user profile example. Instead of:

async function loadProfileSequential(userId) {
  const user = await fetchUser(userId);
  const activity = await fetchActivityFeed(userId);
  const connections = await fetchSocialConnections(userId);

  displayProfile(user, activity, connections);
}

We can dramatically improve performance by using Promise.all():

async function loadProfileParallel(userId) {
  const [user, activity, connections] = await Promise.all([
    fetchUser(userId),
    fetchActivityFeed(userId),
    fetchSocialConnections(userId)
  ]);

  displayProfile(user, activity, connections);
}

This change reduces the total waiting time from the sum of three network round trips to the duration of the single longest network round trip. It’s like sending three couriers out at once instead of one after another. The results are still delivered in the order they were requested, making the code just as readable, but significantly faster.

Pattern 2: Sequential Execution with Error Handling (`try...catch` Blocks)

While parallelism is great for independent tasks, some operations are inherently sequential. You might need to create a resource, then use its ID to create related resources, and so on. In these cases, `await` is correctly used. The real challenge here is robust error handling. A single failure in a chain of `await` calls can halt the entire process, and without proper `try...catch` blocks, the error can be unhandled, leading to application instability.

A common mistake is to wrap the entire `async` function in a single `try...catch`. While this catches errors, it doesn't give you granular control. If you have three sequential `await` calls, and the second one fails, you might want to perform specific cleanup actions related to the first call before propagating the error. This requires placing `try...catch` blocks around individual `await` statements or logical groups of them.

Consider creating a user, then assigning them a default role, and finally sending a welcome email. Each step depends on the previous one.

async function createUserWithDefaults(userData) {
  let newUser;
  try {
    newUser = await createUserApi(userData);
  } catch (error) {
    console.error('Failed to create user:', error);
    throw error; // Re-throw to signal failure
  }

  try {
    await assignDefaultRoleApi(newUser.id);
  } catch (error) {
    console.error('Failed to assign default role:', error);
    // Optional: Attempt to clean up the created user if role assignment fails
    try {
      await deleteUserApi(newUser.id);
      console.log('Cleaned up user after role assignment failure.');
    } catch (cleanupError) {
      console.error('Failed to cleanup user:', cleanupError);
    }
    throw error; // Re-throw the original error
  }

  try {
    await sendWelcomeEmailApi(newUser.email);
  } catch (error) {
    console.error('Failed to send welcome email:', error);
    throw error;
  }

  return newUser;
}

This granular error handling allows for specific recovery or cleanup actions. If assigning the role fails, we can attempt to delete the user that was just created, preventing orphaned records. This is akin to a carefully choreographed dance; if one step is missed, the subsequent steps must be adjusted or aborted gracefully, not just stopped abruptly.

Pattern 3: Handling Multiple Independent Tasks with Potential Failures (`Promise.allSettled()`)

Sometimes, you need to initiate several independent asynchronous operations, but you don't want a single failure to stop the rest. For instance, fetching configuration settings from multiple microservices. If one service is down, you still want to proceed with the settings from the available services. `Promise.all()` would reject immediately upon the first failure, leaving you with partial results at best, or no results at worst.

This is where Promise.allSettled() becomes invaluable. It waits for all Promises in the iterable to settle (either fulfilled or rejected). It then resolves with an array of objects, each describing the outcome of one Promise. Each object has a status property ('fulfilled' or 'rejected') and either a value (if fulfilled) or a reason (if rejected).

Imagine fetching feature flags from three different feature flag services:

async function getFeatureFlags() {
  const results = await Promise.allSettled([
    fetchFeatureFlagsFromServiceA(),
    fetchFeatureFlagsFromServiceB(),
    fetchFeatureFlagsFromServiceC()
  ]);

  const activeFlags = {};
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      activeFlags[`service` + (index + 1)] = result.value;
    } else {
      console.warn(`Service ` + (index + 1) + ` failed to load: `, result.reason);
    }
  });

  return activeFlags;
}

This approach ensures that even if one service is temporarily unavailable, your application can still function using the data from the other services. It provides a much more resilient way to handle external dependencies. It's like having multiple backup generators; if one fails, the others keep the lights on.

Conclusion: Embrace the Patterns

Mastering `async/await` goes beyond simply replacing callbacks. It involves understanding the nature of your asynchronous operations—whether they are independent, sequential, or require resilient handling—and applying the appropriate pattern. `Promise.all()` for parallel efficiency, granular `try...catch` blocks for sequential control and error recovery, and `Promise.allSettled()` for robust handling of multiple independent tasks with potential failures. By adopting these patterns, you not only write faster, more efficient code but also more readable and maintainable applications, saving countless hours in debugging and refactoring.