47. What is promise chaining?

Promise chaining is a technique in JavaScript where multiple asynchronous operations are executed one after another, with each operation returning a Promise that passes its result to the next .then() in the chain. This allows you to perform a series of operations in a structured and readable way, avoiding callback nesting (also known as "callback hell").

Example

Here’s a simple example that demonstrates promise chaining:

javascript
CopyEdit
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
};

const processData = (data) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${data} -> Processed`);
    }, 1000);
  });
};

const displayData = (data) => {
  console.log(data);
};

fetchData()
  .then((result) => processData(result)) // Pass fetched data to processData
  .then((processedData) => displayData(processedData)) // Display processed data
  .catch((error) => console.error('Error:', error)); // Handle any errors

Explanation:

1. fetchData() returns a promise that resolves after 1 second.
2. The result from fetchData() is passed to processData() using .then() chaining.
3. processData() returns a promise that resolves after 1 second with the processed data.
4. The result from processData() is passed to displayData() using another .then() call.
5. If any promise in the chain rejects, the .catch() block will handle the error.

Output:

rust
CopyEdit
Data fetched -> Processed

Why Use Promise Chaining:

• Cleaner and more readable code compared to nested callbacks.
• Better error handling using a single .catch() at the end.
• Sequential execution of asynchronous tasks.