javascript - Promise中返回Promise为什么会立即执行?请大牛解释下原理谢谢
黄舟
黄舟 2017-05-19 10:10:29
0
3
876

下面是代码

    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的?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(3)
Peter_Zhu

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,这里是传送门,希望对您有所帮助

阿神

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

PHPzhong

你可以把这个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);
    })
}

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板