javascript - Why is Promise executed immediately when returned from Promise? Please explain the principle. Thank you.

Question

The following is the code

    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. Why is the Promise object returned in then resolved in the next then?

2. Is the execution chain of the second then the second Promise?

Answer 1

The idea of ​​​​Promise is to treat all synchronous and asynchronous code as asynchronous code. The then method will return a new Promise（链式调用）,then方法的第一个参数onfulfilled是在前一个Promise object that is called after the asynchronous call is completed

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

This still involves some implementations inside the constructor. I just implemented a simple Promise a few days ago. Here is the portal. I hope it will be helpful to youPromise

Answer 2

I am not an expert-_-I will describe my point of view.
Then chain call will take the return value of the previous then as a parameter. The internal implementation of Promise's then function is to perform Promise object processing on the return value. For example, basic data types will directly return Promise objects through Promise.resolve(data). If it is a Promise object, execute its resolve function to trigger the next then function.

Answer 3

You can decompose this then execution chain into:

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

You can also use setTimeout to set function retPromise(str) to delayed return. This works better

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