Promise 实现原理

作者: 209bd3bc6844 | 来源:发表于2017-06-02 15:41 被阅读589次

原理分析

场景分析

//例1
function getUserId() {
    return new Promise(function(resolve) {
        //异步请求
        http.get(url, function(results) {
            resolve(results.id)
        })
    })
}
getUserId().then(function(id) {
    //一些处理
})

简易版promise

function Promise(fn) {
  var value = null;
  var callbacks = [];
  this.then = function (onFulfilled) {
    callbacks.push(onFulfilled);
  } //注册回调函数。
  function resolve (value) {
    callbacks.forEach((callback) => {
      callback(value);
   })// 当Promise中触发了resolve()时候。执行回调函数
  fn(resolve); // 执行Promise传入的函数。
  }
}

上述代码很简单，大致的逻辑是这样的：

调用then方法，将想要在Promise异步操作成功时执行的回调放入callbacks，其实也就是注册回调函数，可以向观察者模式方向思考；
创建Promise实例时传入的函数会被赋予一个函数类型的参数，即resolve，它接收一个参数value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用resolve方法，这时候其实真正执行的操作是将callbacks队列中的回调一一执行；

可以结合例1中的代码来看，首先new Promise时，传给promise的函数发送异步请求，接着调用promise对象的then属性，注册请求成功的回调函数，然后当异步请求发送成功时，调用resolve(results.id)方法, 该方法执行then方法注册的回调数组。

相信仔细的人应该可以看出来，then方法应该能够链式调用，但是上面的最基础简单的版本显然无法支持链式调用。想让then方法支持链式调用，其实也是很简单的：

this.then = function (onFulfilled) {
    callbacks.push(onFulfilled);
    return this;
};

只要简单一句话就可以实现类似下面的链式调用：

// 例2
getUserId().then(function (id) {
    // 一些处理
}).then(function (id) {
    // 一些处理
});

不过上式中的then方法虽然是链式调用但却全部都是注册给getUserId这个promise的。

加入延时机制

细心的同学应该发现，上述代码可能还存在一个问题：如果在then方法注册回调之前，resolve函数就执行了，怎么办？比如promise内部的函数是同步函数：

// 例3
function getUserId() {
    return new Promise(function (resolve) {
        resolve(9876);
    });
}
getUserId().then(function (id) {
    // 一些处理
});

这显然是不允许的，Promises/A+规范明确要求回调需要通过异步方式执行，用以保证一致可靠的执行顺序。因此我们要加入一些处理，保证在resolve执行之前，then方法已经注册完所有的回调。我们可以这样改造下resolve函数:

function resolve(value) {
    setTimeout(function() {
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }, 0)
}

上述代码的思路也很简单，就是通过setTimeout机制，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，then方法的回调函数已经注册完成.

但是，这样好像还存在一个问题，可以细想一下：如果Promise异步操作已经成功，这时，在异步操作成功之前注册的回调都会执行，但是在Promise异步操作成功这之后调用的then注册的回调就再也不会执行了，这显然不是我们想要的。

加入状态

恩，为了解决上一节抛出的问题，我们必须加入状态机制，也就是大家熟知的 pending、fulfilled、rejected。

Promises/A+规范中的2.1Promise States中明确规定了，pending可以转化为fulfilled或rejected并且只能转化一次，也就是说如果pending转化到fulfilled状态，那么就不能再转化到rejected。并且fulfilled和rejected状态只能由pending转化而来，两者之间不能互相转换。一图胜千言：

改进后的代码是这样的:

// promise 1.0
function Promise(fn) {
    var state = 'pending',
        value = null,
        callbacks = [];
    this.then = function (onFulfilled) {
        if (state === 'pending') {
            callbacks.push(onFulfilled);
            return this;
        }
        onFulfilled(value);
        return this;
    };
    function resolve(newValue) {
        value = newValue;
        state = 'fulfilled';
        setTimeout(function () {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        }, 0);
    }
    fn(resolve);
}

上述代码的思路是这样的：resolve执行时，会将状态设置为fulfilled，在此之后调用then添加的新回调，都会立即执行。

链式Promise

那么这里问题又来了，如果用户再then函数里面注册的仍然是一个Promise，该如何解决？比如下面的例4：

// 例4
getUserId()
    .then(getUserJobById)
    .then(function (job) {
        // 对job的处理
    });
function getUserJobById(id) {
    return new Promise(function (resolve) {
        http.get(baseUrl + id, function(job) {
            resolve(job);
        });
    });
}

这种场景相信用过promise的人都知道会有很多，那么类似这种就是所谓的链式Promise。

链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise（后邻promise）。那么我们如何衔接当前promise和后邻promise呢？（这是这里的难点）。

之前实现的的promise实现为什么不能连接前后的promise呢？
之前是return this实现链式调用。这样的话

function getUserJobById() {
    return new Promise(function (resolve) {
        setTimeout(()=>{resolve('2')},2000)
    })
}
function getUserId() {
    return new Promise(function (resolve) {
       setTimeout(()=>{resolve('1')},2000)
    });
}
getUserId()
    .then(getUserJobById)
    .then(function (job) {
        console.log('job', job)  // 打印出来的结果为1
    });

打印的结果为1,是因为两个then函数都注册的是getUserId的回调。所以getUserId触发resolve('1')时候，两个then函数注册的函数都会被执行。所以这里我们打印的结果为1。这并不是我们想要的结果。我们所期望的结果是第二个then函数能在第一个then函数执行完成后再执行。就是getUserId和getUserJobById两个promise都触发了resolve后执行。
那我们把 return this给去掉。不把一个promise的回调写在多个then函数里，我们都写在一个then函数里。试试结果如何？

VM707:34 Uncaught TypeError: Cannot read property 'then' of undefined
    at <anonymous>:34:5  //报错

为什么会报错呢。因为没有了return this之后，第一个then函数执行后的没有任何返回值，所以第二个then函数of undefined了。
所以解决办法可以是给 then函数返回一个promise就好啦。这样可以统一then里面是同步或者异步不同的执行顺序链接，并且这样的话，如果then函数(称为为前一个then，就是getUserId().then()的这个then)里面还是个promise例如getUserJobById的话，可以getUserJobById函数resolve时执行自身promise的then函数(也是一个promise)的resolve，同时触发前一个then函数的resolve(就是一个then内手动的触发两个promise函数resolve)。这样的话就可以执行前一个then(promise)函数的的注册(下一个)then函数了。如果then函数中不是promise的话。就直接执行完触发then函数的resolve。
例如getUserId().then(getUserJobById)中的then函数是一个promise。这个then的promise的resolve事件会在getUserJobById这个promise函数resolve后进行。

function Promise(fn) {
    var state = 'pending',
        value = null,
        callbacks = [];
    this.then = function (onFulfilled) {
        return new Promise(function (resolve) {
            handle({
                onFulfilled: onFulfilled || null,
                resolve: resolve
            });
        });
    };
    function handle(callback) {
        if (state === 'pending') {
            callbacks.push(callback);
            return;
        }
        var ret = callback.onFulfilled(value);
        callback.resolve(ret);// 因为then现在是promise，所以需要这一步把then的promise给结束掉
    }
    
    function resolve(newValue) {
        if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
            var then = newValue.then;
            if (typeof then === 'function') {
                then.call(newValue, resolve);
                return;
            }
        }
        state = 'fulfilled';
        value = newValue;
        setTimeout(function () {
            callbacks.forEach(function (callback) {
                handle(callback);
            });
        }, 0);
    }
    fn(resolve);
}

我们结合例4的代码，分析下上面的代码逻辑，

then方法中，创建并返回了新的Promise实例，这是串行Promise的基础，并且支持链式调用。
handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promise的callbacks队列中，这是衔接当前promise和后邻promise的关键所在（这里一定要好好的分析下handle的作用）。
getUserId生成的promise（简称getUserId promise）异步操作成功，执行其内部方法resolve，传入的参数正是异步操作的结果id
调用handle方法处理callbacks队列中的回调：getUserJobById方法，生成新的promise（getUserJobById promise）
执行之前由getUserId promise的then方法生成的新promise(称为bridge promise)的resolve方法，传入参数为getUserJobById promise。这种情况下，会将该then生成的promise的resolve方法传入getUserJobById promise的then方法中，并直接返回。
在getUserJobById promise异步操作成功时，执行其callbacks``中的回调getUserId bridge promise中的resolve`方法
最后执行getUserId bridge promise的后邻promise的callbacks中的回调。

30分钟，让你彻底明白Promise原理
[Promise 的链式调用与中止](http://www.tuicool.com/articles/eERRZjA

PromiseA的resolve里面如果还是个PromiseB。不论这个PromiseB是否已经被决议，都会把PromiseA的resolve放在队列的最后。规定的行为是把 p3 展开到 p1，但是是异步地展开。

 var p3 = new Promise( function(resolve,reject){
         resolve( "B" );
} );
     var p1 = new Promise( function(resolve,reject){
         resolve( p3 );
} );
     p2 = new Promise( function(resolve,reject){
         resolve( "A" );
} );
     p1.then( function(v){
         console.log( v );
} );
 p2.then( function(v){
         console.log( v );
} );
// A B <-- 而不是像你可能认为的B A

Promise 实现原理

原理分析

场景分析

简易版promise

加入延时机制

加入状态

链式Promise

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

技术类文章