Promise chaining

Basic Concepts of Promise Chaining

Promise chaining is one of the core features in ECMAScript 6 for handling asynchronous operations. It allows developers to organize asynchronous code sequentially, avoiding the "callback hell" problem associated with traditional callback functions. Promise chains connect multiple asynchronous operations via the then() method, where each then() receives the resolved value from the previous Promise and returns a new Promise.

fetch('/api/data')
  .then(response => response.json())
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => handleError(error));

How Promise Chaining Works

The core of Promise chaining lies in the return mechanism of the then() method. Each call to then() creates a new Promise object, and the state of this new Promise depends on the execution result of the callback function:

1. If the callback returns a plain value, the new Promise resolves immediately with that value.
2. If the callback returns a Promise, the new Promise will "follow" that returned Promise.
3. If the callback throws an exception, the new Promise will reject with that exception.

const promise = new Promise((resolve) => resolve(1));

promise
  .then(value => {
    console.log(value); // 1
    return value + 1;
  })
  .then(value => {
    console.log(value); // 2
    return Promise.resolve(value + 1);
  })
  .then(value => {
    console.log(value); // 3
    throw new Error('Something went wrong');
  })
  .catch(error => {
    console.error(error.message); // "Something went wrong"
  });

Error Handling Strategies

Error handling in Promise chains is primarily achieved through the catch() method, which has the following characteristics:

• catch() captures errors occurring anywhere in the chain.
• A single catch() at the end of the chain can handle all errors.
• catch() itself returns a new Promise, allowing the chain to continue.

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    if (!data.valid) {
      throw new Error('Invalid data format');
    }
    return processComplexData(data);
  })
  .catch(error => {
    console.error('Error in processing chain:', error);
    return getFallbackData(); // Provide fallback data
  })
  .then(finalData => {
    // Executes here whether the previous steps succeeded or failed (with fallback)
    renderUI(finalData);
  });

Advanced Chaining Patterns

Parallel Execution and Sequential Processing

Combine Promise.all() to achieve parallel operations within a chain:

function getUserProfile(userId) {
  return fetchUser(userId)
    .then(user => {
      return Promise.all([
        user,
        fetchFriends(user.id),
        fetchPosts(user.id)
      ]);
    })
    .then(([user, friends, posts]) => {
      return {
        ...user,
        friends,
        posts
      };
    });
}

Conditional Chaining

Decide whether to execute certain steps based on previous results:

function loadContent(preferCache) {
  return checkCache()
    .then(cachedData => {
      if (cachedData && preferCache) {
        return cachedData;
      }
      return fetchFreshData()
        .then(data => {
          return updateCache(data);
        });
    });
}

Return Value Handling in Promise Chains

The return value of each then() callback affects the subsequent behavior of the chain:

Promise.resolve()
  .then(() => {
    return 'Direct return value';
  })
  .then(val => {
    console.log(val); // "Direct return value"
    return new Promise(resolve => {
      setTimeout(() => resolve('Delayed value'), 1000);
    });
  })
  .then(val => {
    console.log(val); // Outputs "Delayed value" after 1 second
    // Not returning anything is equivalent to returning undefined
  })
  .then(val => {
    console.log(val); // undefined
  });

Practical Application Examples

User Login Flow

function login(username, password) {
  return validateInput(username, password)
    .then(() => authenticate(username, password))
    .then(token => {
      return Promise.all([
        getUserProfile(token),
        getNotifications(token)
      ]);
    })
    .then(([profile, notifications]) => {
      return {
        profile,
        notifications,
        lastLogin: new Date()
      };
    })
    .then(userData => {
      return saveToSessionStorage(userData);
    });
}

Data Preprocessing Pipeline

function processDataPipeline(rawData) {
  return Promise.resolve(rawData)
    .then(data => validateDataStructure(data))
    .then(validData => cleanData(validData))
    .then(cleanData => transformData(cleanData))
    .then(transformedData => {
      return enrichData(transformedData);
    })
    .then(enrichedData => {
      return analyzeData(enrichedData);
    });
}

Common Pitfalls and Best Practices

Forgetting to Return a Promise

// Bad example
somePromise
  .then(value => {
    anotherAsyncOperation(value); // Forgot to return
  })
  .then(result => {
    // result will be undefined
  });

// Correct approach
somePromise
  .then(value => {
    return anotherAsyncOperation(value); // Explicit return
  })
  .then(result => {
    // Correctly handles the result
  });

Improper Error Handling Placement

// Potentially insufficient error handling
doFirstThing()
  .then(doSecondThing)
  .catch(handleError) // After catching, the chain continues
  .then(doThirdThing); // Executes even if previous steps failed

// Better approach
doFirstThing()
  .then(doSecondThing)
  .then(doThirdThing)
  .catch(handleError); // Centralized error handling

Performance Considerations for Promise Chains

Long Promise chains may introduce minor performance overhead, but this is negligible in most cases. For performance-sensitive scenarios:

// Independent operations can run in parallel
Promise.all([task1, task2, task3])
  .then(([result1, result2, result3]) => {
    // Combine and process results
  });

// Alternative to long chaining
asyncTask1()
  .then(combine1)
  .then(combine2)
  .then(combine3); // May create multiple microtasks