Promise Chains

Available

3.1 Creating Promise Chains

Promise chains let you perform several async operations in sequence, passing the result of one operation to the next one. This makes your code more readable and manageable. Plus, promises offer powerful error-handling capabilities, making it possible to build reliable and fault-tolerant applications.

Main Concept

A promise chain is created by returning a new promise from the then method. Each then method returns a new promise, allowing you to build sequential async operations.

Simple Promise Chain Example

In this example, each then method performs its operation and passes the result to the next then method.

JavaScript
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Step 1 completed');
  }, 1000);
});

promise
  .then((result) => {
    console.log(result); // Outputs: Step 1 completed
    return 'Step 2 completed';
  })
  .then((result) => {
    console.log(result); // Outputs: Step 2 completed
    return 'Step 3 completed';
  })
  .then((result) => {
    console.log(result); // Outputs: Step 3 completed
  })
  .catch((error) => {
    console.error(error);
  });

Example with Async Operations

In this example, each then method waits for the async operation to complete before proceeding to the next step:

JavaScript
function asyncOperation(step) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${step} completed`);
    }, 1000);
  });
}

asyncOperation('Step 1')
  .then((result) => {
    console.log(result); // Outputs: Step 1 completed
    return asyncOperation('Step 2');
  })
  .then((result) => {
    console.log(result); // Outputs: Step 2 completed
    return asyncOperation('Step 3');
  })
  .then((result) => {
    console.log(result); // Outputs: Step 3 completed
  })
  .catch((error) => {
    console.error(error);
  });

3.2 Error Handling in Promise Chains

The catch method is used to handle errors in a promise chain. If an error occurs in any of the promises, it is passed to the nearest catch method. This allows centralized error handling, improving code readability and maintainability.

Error Handling Example

In this example, an error in Step 2 is caught by the catch method, and subsequent then methods do not execute:

JavaScript
function asyncOperation(step, shouldFail = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(`${step} failed`);
      } else {
        resolve(`${step} completed`);
      }
    }, 1000);
  });
}

asyncOperation('Step 1')
  .then((result) => {
    console.log(result);
    return asyncOperation('Step 2', true); // This operation will fail
  })
  .then((result) => {
    console.log(result); // This code will not be executed
    return asyncOperation('Step 3');
  })
  .then((result) => {
    console.log(result); // This code will not be executed
  })
  .catch((error) => {
    console.error('Error:', error); // Outputs: Error: Step 2 failed
  });

Handling Errors in Specific Steps

Sometimes, you might need to handle errors in specific steps without stopping the entire chain. You can use nested then and catch methods for this.

Error Handling in Specific Steps Example

In this example, an error in Step 2 is handled locally, and the chain continues with a recovered value:

JavaScript
function asyncOperation(step, shouldFail = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(`${step} failed`);
      } else {
        resolve(`${step} completed`);
      }
    }, 1000);
  });
}

asyncOperation('Step 1')
  .then((result) => {
    console.log(result);
    return asyncOperation('Step 2', true).catch((error) => {
      console.warn('Handled error in Step 2:', error);
      return 'Recovered from Step 2 error';
    });
  })
  .then((result) => {
    console.log(result); // Outputs: Recovered from Step 2 error
    return asyncOperation('Step 3');
  })
  .then((result) => {
    console.log(result); // Outputs: Step 3 completed
  })
  .catch((error) => {
    console.error('Error:', error); // This code will not be executed
  });

3.3 Using finally

The finally method executes code regardless of whether the promise was resolved successfully or with an error. This is useful for performing cleanup operations or freeing up resources.

Using finally Example:

JavaScript
function asyncOperation(step, shouldFail = false) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(`${step} failed`);
      } else {
        resolve(`${step} completed`);
      }
    }, 1000);
  });
}

asyncOperation('Step 1')
  .then((result) => {
    console.log(result);
    return asyncOperation('Step 2');
  })
  .then((result) => {
    console.log(result);
    return asyncOperation('Step 3');
  })
  .catch((error) => {
    console.error('Error:', error);
  })
  .finally(() => {
    console.log('All operations completed'); // Will be executed in any case
  });

In this example, the finally method runs no matter what, regardless of whether an error occurred.

1
Task
Frontend SELF EN,  level 43lesson 2
Locked
Promise Chain
Promise Chain
1
Task
Frontend SELF EN,  level 43lesson 2
Locked
Errors in the Chain
Errors in the Chain
Comments
  • Popular
  • New
  • Old
You must be signed in to leave a comment
This page doesn't have any comments yet