The reason behind the successful execution of the final .then in promise chaining

Question

The reason behind the successful execution of the final .then in promise chaining

I am new to JavaScript and have encountered an interesting problem with the following code. Even though I haven't returned anything from the .then method, the last .then (blue color) works instead of the first one (red color). Can someone explain why this is happening?

let bodyBgChange = (color, delay) => {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            document.body.style.backgroundColor = color
            resolve()
        }, delay)
        
    })
}

bodyBgChange('green',1000)
    .then(()=>{ 
        bodyBgChange('red', 1000)
    })
    .then(()=>{
        bodyBgChange('yellow', 1000)
    })
    .then(()=>{
        bodyBgChange('pink', 1000)
    })
    .then(()=>{
        bodyBgChange('blue', 1000)
    })

javascript

Answer 1

Answer №1

It is important not to forget the return statement or to utilize the arrow function's implicit return

let changeBackground = (color, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color
      resolve()
    }, delay)

  })
}

changeBackground('green', 1000)
  .then(() => {
    return changeBackground('red', 1000)
  })
  .then(() => {
    return changeBackground('yellow', 1000)
  })
  .then(() => {
    return changeBackground('pink', 1000)
  })
  .then(() => {
    return changeBackground('blue', 1000)
  })

Answer 2

It is important not to forget the return statement or to utilize the arrow function's implicit return

let changeBackground = (color, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color
      resolve()
    }, delay)

  })
}

changeBackground('green', 1000)
  .then(() => {
    return changeBackground('red', 1000)
  })
  .then(() => {
    return changeBackground('yellow', 1000)
  })
  .then(() => {
    return changeBackground('pink', 1000)
  })
  .then(() => {
    return changeBackground('blue', 1000)
  })

Answer 3

Answer №2

It will execute each then block only if there are no errors.

There's a special trick: the then() function creates a brand new promise that is separate from the original one:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Truly like dark magic.

Answer 4

It will execute each then block only if there are no errors.

There's a special trick: the then() function creates a brand new promise that is separate from the original one:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Truly like dark magic.

Answer 5

Answer №3

There might be a misunderstanding with the usage of then in this context.

Even if each of your then hooks are executed, it may appear that only the last one is "working" due to them all having the same timer set. By returning values within your then hook, you can pass on that value to the next then hook and achieve the expected behavior in this scenario.

let changeBackgroundColor = (color, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color
      resolve()
    }, delay)
  })
}

changeBackgroundColor('green', 1000)
  .then(() => {
    return changeBackgroundColor('red', 1000)
  })
  .then(() => {
    return changeBackgroundColor('yellow', 1000)
  })
  .then(() => {
    return changeBackgroundColor('pink', 1000)
  })
  .then(() => {
    return 'foo'
  })
  .then((val) => {
    // val === 'foo'
  }

Answer 6

There might be a misunderstanding with the usage of then in this context.

Even if each of your then hooks are executed, it may appear that only the last one is "working" due to them all having the same timer set. By returning values within your then hook, you can pass on that value to the next then hook and achieve the expected behavior in this scenario.

let changeBackgroundColor = (color, delay) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.body.style.backgroundColor = color
      resolve()
    }, delay)
  })
}

changeBackgroundColor('green', 1000)
  .then(() => {
    return changeBackgroundColor('red', 1000)
  })
  .then(() => {
    return changeBackgroundColor('yellow', 1000)
  })
  .then(() => {
    return changeBackgroundColor('pink', 1000)
  })
  .then(() => {
    return 'foo'
  })
  .then((val) => {
    // val === 'foo'
  }

The reason behind the successful execution of the final .then in promise chaining

Answer №1

Answer №2

Answer №3

Similar questions

Is the exchange between Ajax/jQuery and PHP a two-way street?

AngularJS is not immediately responsive to changes in $window.document.visibilityState

Strategies for concealing and revealing content within dynamically loaded AJAX data

Issue with Chart.js V3.20: Struggling to Filter Legend Labels

Executing two distinct SQL queries within one nodejs function

Toggle the hamburger menu using JavaScript

Organizing Parsed JSON Data with JavaScript: Using the _.each function for Sorting

The Alert Component fails to display when the same Error is triggered for the second time

The button attached to the jQuery .toggle() function requires two clicks to activate

The Element Datepicker incorrectly displays "yesterday" as an active option instead of disabled when the timezone is set to +14

Converting PHP arrays into JavaScript arrays with the help of json_encode()

Automatically preselect the checkbox inputs with the API and update their status when they are interacted with

When implementing Firebase Cloud Messaging with React, the token generated by firebase.messaging().getToken() will vary with every refresh

Monitor changes in the select tag to display the updated value and output

Detecting collisions between two squares in an HTML5 canvas

Eliminating unnecessary CSS from the codebase of a website

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

Tips on expanding the space between words in a scrolling "marquee" text

What is the best way to retrieve specific items using the Chosen JQuery plugin?

Tips for avoiding page reload when submitting a form with form.submit() in ReactJs