为什么最后一个.then在promise chaining中工作
为什么最后一个.then在promise chaining中工作
提问于 2021-07-17 15:58:51
我是JavaScript的新手。在下面的代码中，我没有从.then方法返回任何内容。因此，正如预期的那样，.then将无法工作。我的问题是，为什么最后一个.then (蓝色)而不是第一个.then (红色)可以工作。
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)
})
回答 3
Stack Overflow用户
发布于 2021-07-17 16:08:39
您忘记了return或使用箭头函数的implicit return
let bodyBgChange = (color, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
document.body.style.backgroundColor = color
resolve()
}, delay)
})
}
bodyBgChange('green', 1000)
.then(() => {
return bodyBgChange('red', 1000)
})
.then(() => {
return bodyBgChange('yellow', 1000)
})
.then(() => {
return bodyBgChange('pink', 1000)
})
.then(() => {
return bodyBgChange('blue', 1000)
})
Stack Overflow用户
发布于 2021-07-17 16:15:04
如果没有发生错误，它只是每隔then块运行一次。
then的神奇之处在于：
()函数返回一个新的promise，与原来的不同：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
真的是个黑魔法。
Stack Overflow用户
发布于 2021-07-17 16:27:09
你误解了then的意思。
您的每个then钩子都会被调用，无论它们是否返回一个值。由于每个钩子都设置了相同的计时器，因此似乎只有最后一个钩子在“工作”。在then钩子中返回值将把该值传递给下一个then钩子，这应该会导致您在本例中预期的行为。
let bodyBgChange = (color, delay) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
document.body.style.backgroundColor = color
resolve()
}, delay)
})
}
bodyBgChange('green', 1000)
.then(() => {
return bodyBgChange('red', 1000)
})
.then(() => {
return bodyBgChange('yellow', 1000)
})
.then(() => {
return bodyBgChange('pink', 1000)
})
.then(() => {
return 'foo'
})
.then((val) => {
// val === 'foo'
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68418569
复制相关文章
相似问题
腾讯云开发者
