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

Tips for shifting a designated row upward in Chrome using JavaScript

Encountering problems during the installation of Ionic - Error code 'EPROTO'

JavaScript prototypal inheritance concept

The default value of components in Next.js

Enhance the table using Django URL tag along with JQuery

Dynamic Searching in ASP.NET Core MVC Select Component

Enclose every line of the paragraph within a <span> element

Utilizing the default event object in ag-Grid's event methods with JavaScript

Comment sections that refresh automatically after being posted

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

Ways to restrict a function to a single DOM element using either its id or class

What makes using setInterval with a self-invoking function a smarter choice?

What sets npm run apart from npm start?

Get the color at a specific index in a JavaScript array

Error Message: Namespace Invalid in Node.js Application Utilizing Mongoose Library with MongoDB Atlas Database

Tips for ensuring a successful POST request using a hyperlink tag

What is the best way to conceal a button before printing and have it reappear once the printing process is finished?

jquery accordion failing to display content

What is the reason for Jest attempting to resolve all components in my index.ts file?

The hyperlink functionality is disabled because Javascript is set to return false