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);
    })
}