javascript - Promise中返回Promise为什么会立即执行？请大牛解释下原理谢谢

Question

下面是代码

    function retPromise(str) {
        return new Promise(resolve=>{
            resolve(str);
        })
    }
    
    console.log(retPromise("first")) // 返回一个Promise对象
    
    retPromise("x").then(str=>{
        return retPromise("first")
    }).then(str=>{
        console.log(str) // 返回"first"
    })

1. 为什么在then中return Promise对象，在下一个then中被resolve了?

2. 第二个then的执行链是不是第二个Promise的？

Answer 1

Promise的思想就是把所有同步和异步的代码都视为异步代码，then方法内部会返回一个新的Promise（链式调用）,then方法的第一个参数onfulfilled是在前一个Promise对象的异步调用完成之后调用的

    then(onfulfilled, onrejected){
            // 每个then方法都返回一个新的promise对象，实现链式调用

            return new Promise((resolve, reject)=>{

                let success = (value)=>{
                    // 这里执行onFulfilled，判断是否是promise对象并将返回结果作为参数传递到当前promise的reslove中
                    // 如果没有返回值，则默认返回原本的value值，这一步的处理并不是必须的
                    let result = onfulfilled(value) || value;
                    if (isThenable(result)){
                        result.then((value)=>{
                            resolve(value);
                        }, (value)=>{
                            reject(value);
                        });
                    }else {
                        resolve(result);
                    }
                }

                let error = (value)=>{
                    let result = onrejected(value) || value;
                    resolve(result);
                }
                
                // 当调用then方法的那个promise对象onfulfilled时调用success，执行上面的操作
                switch(this.status){
                    case PENDING:
                        this.onfulfilled = success;
                        this.onrejected = error;
                        break;
                    case FULFILLED:
                        success(this.value);
                        break;
                    case REJECTED:
                        error(this.reason);
                        break;
                }
                
            })
        }

这里还是牵扯到Promise构造函数内部的一些实现，刚好前几天实现了一个简单的Promise，这里是传送门，希望对您有所帮助

Answer 2

我不是大牛-_-我描述下我的观点。
then链式调用会取上一个then的return值做参数，Promise的then函数内部实现为对return的值进行Promise对象化处理，比如基本数据类型会直接通过Promise.resolve(data)返回Promise对象，如果是Promise对象则执行其resolve函数来触发下一个then函数。

Answer 3

你可以把这个then执行链分解成：

var promise1 = retPromise('x');//函数retPromise('x')返回的一个promise
var promise2 = promise1.then(str=>{//当retPromise('x')返回的promise执行成功后返回一个新的promise，也就是promise2
 console.log(str);
 return retPromise("first");
})

promise2.then(str=>{
    console.log(str);
})

你也可以利用setTimeout把function retPromise(str)设置成延迟返回。这样效果更好一点

   function retPromise(str) {
    return new Promise(resolve=>{
      //var str1;
       setTimeout(function(){ console.log(str); str = str + " success!"; resolve(str);}, 3000);
    })
}