为何Promise.then中return语句后的代码无法执行？

先看你写的定时切换背景色的代码：

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

colorChange("red", 1000)
    .then(() => {
        return colorChange("blue", 1000);
        console.log("blue");
    })
    .then(() => {
        colorChange("yellow", 1000);
        console.log("yellow");
    })

问题1：为什么return colorChange("blue",1000)后console.log("blue")不执行？ #

这和Promise无关，是JavaScript的基础语法规则：函数里的return语句会立即终止当前函数的执行，return后面的所有代码都不会被运行。你这里写了return之后，console.log("blue")属于return的后续语句，自然不会被执行。

如果想让console.log执行，只需要把它放到return前面：

.then(() => {
    console.log("blue");
    return colorChange("blue", 1000);
})

问题2：.then方法是否只能在return语句后写一行代码？ #

当然不是。.then的回调函数就是普通的JavaScript函数，你可以在里面写任意多行代码，只要记住：如果需要让下一个.then等待当前异步操作完成，就要在回调函数里return对应的Promise对象。

比如你可以写多行逻辑再return：

.then(() => {
    console.log("即将切换背景色为蓝色");
    // 这里可以加任意逻辑，比如判断、变量处理
    const isAllowed = true;
    if (isAllowed) {
        console.log("切换条件满足");
    }
    return colorChange("blue", 1000);
})

甚至可以在return之前执行多个同步操作，只要最后return Promise来维持链式调用的顺序即可。

内容的提问来源于stack exchange，提问作者zzh315