Using await vs. Promise.all()

Improving performance with a small trick

1. Using await Sequentially

When you use await for each function in a sequence, JavaScript waits for each Promise to resolve before moving to the next one. This means the functions are run one after another.

Example:

async function loadAllDataSequentially() {
  await this.loadApiItems();  // First, wait for loadApiItems to complete
  await this.getApiProfile();   // Then, wait for getApiProfile to complete
  await this.loadServiceProvider();  // Next, wait for loadServiceProvider to complete
  await this.loadRandomApi();  // Finally, wait for loadRandomApi
}

How it Works:

  • Step 1: this.loadApiItems() starts and completes.
  • Step 2: Only after that, this.getApiProfile() starts and completes.
  • Step 3: Then, this.loadServiceProvider() runs, and so on.
  • Total time: Sum of the time taken by each individual function. For example, if each function takes 1 second, the total time will be 4 seconds.

Pros of Sequential await:

  • Easier to understand, especially if each function depends on the result of the previous one.

Cons of Sequential await:

  • Slower performance: Since each function has to finish before the next starts, the total time is the sum of all the functions' execution times.

2. Using Promise.all() for Parallel Execution

When you use Promise.all(), the functions are all run simultaneously, and the code waits for all the Promises to resolve before continuing.

Example:

async function loadAllDataInParallel() {
  await Promise.all([
    this.loadApiItems(), 
    this.getApiProfile(), 
    this.loadServiceProvider(), 
    this.loadRandomApi()
  ]);
}

How it Works:

  • Step 1: All functions are initiated at the same time.
  • Step 2: JavaScript waits for all of them to resolve.
  • Total time: The time taken is roughly equal to the slowest function, not the sum of all of them. For example, if each function takes 1 second, the total time will be 1 second (assuming no dependency between the functions).

Pros of Promise.all():

  • Faster performance: Since the functions run simultaneously, the total time is reduced to the longest function's duration.

Cons of Promise.all():

  • Error handling: If one function fails, the entire Promise.all() call rejects, so you need to handle errors for each individual promise if necessary.
  • Not suitable if the functions depend on each other (e.g., one function needs data from a previous one).

Summary of Differences:

| Sequential await | Parallel with Promise.all() | |-------------------------|------------------------------------| | Each function runs one after another | Functions run simultaneously | | Slower (total time = sum of execution times) | Faster (total time = longest function) | | Easier to reason about if functions depend on each other | Requires all functions to be independent | | Errors are handled one at a time | If one Promise fails, the whole Promise.all() rejects |

When to Use Which:

  • Use await sequentially: When the functions depend on the results of each other, or they must be executed in a specific order.
  • Use Promise.all(): When the functions are independent and can be run in parallel for better performance.