promise的原理

Promise 类似于一个事务管理器,它的作用就是将各种内嵌回调的事务用流水形式表达。利用 Promise 可以让异步编程更符合人的直觉,让代码逻辑更加清晰,把开发人员从回调地狱中释放出来。

基础概念

目前, Promise 是 ECMAScript 6 规范的重要特性之一,各大浏览器也开始慢慢支持这一特性。当然,也有一些第三方内库实现了该功能,如: Q 、 when 、 WinJS 、 RSVP.js 等。

Promise 对象用来进行延迟( deferred )和异步( asynchronous )计算。一个 Promise 处于以下四种状态之一:

  • pending: 还没有得到肯定或者失败结果,进行中
  • fulfilled: 成功的操作
  • rejected: 失败的操作
  • settled: 已被 fulfilled 或 rejected

Promise 对象有两个重要的方法,一个是 then ,另一个是 resolve :

  • then:将事务添加到事务队列中
  • resolve:开启流程,让整个操作从第一个事务开始执行

Promise 常用方式如下:

var p = new Promise(function(resolve, reject) {
 ... // 事务触发 resovle(xxx); ... 
 });
p.then(function(value) { // 满足 };
function(reason) { // 拒绝 }).then().then()...

实现步骤

Promise 其实就是一个状态机。按照它的定义,我们可从如下基础代码开始:

var PENDING = 0;   // 进行中
var FULFILLED = 1; // 成功 
var REJECTED = 2;  // 失败 
function Promise() { 
    var state = PENDING;// 存储PENDING, FULFILLED或者REJECTED的状态 
    var value = null;// 存储成功或失败的结果值 
    var handlers = []; // 存储成功或失败的处理程序,通过调用`.then`或者`.done`方法 

    function fulfill(result) { // 成功状态变化 
        state = FULFILLED;
        value = result; 
    }

    function reject(error) { // 失败状态变化 
        value = error; 
    }
}

2.下面是 Promise 的 resolve 方法实现:

注意: resolve 方法可接收的参数有两种:

  • 一个普通的值/对象
  • 一个 Promise 对象。
    如果是普通的值/对象,则直接把结果传递到下一个对象;
    如果是一个 Promise 对象,则必须先等待这个子任务序列完成。
function Promise(){ 
    ... 
    function resolve(result){
        try {
            var then = getThen(result); 
            // 如果是一个promise对象 
            if (then) {  
                 doResolve(then.bind(result), resolve, reject); 
                 return;
             }
             // 修改状态,传递结果到下一个事务 
             fulfill(result); 
         } catch (e) { 
             reject(e); 
         }
    }
}

两个辅助方法:

/** * Check if a value is a Promise and, if it is, 
* return the `then` method of that promise. 
* * @param {Promise|Any} value  
* * @return {Function|Null} 
* */  
function getThen(value) { 
    var t = typeof value;  
    if (value && (t === 'object' || t === 'function')) { 
        var then = value.then;  
        if (typeof then === 'function') { 
            return then;  
        } 
    }
     return null;
}
/** * Take a potentially misbehaving resolver function and make sure   
* onFulfilled and onRejected are only called once. 
* Makes no guarantees about asynchrony. 
* @param {Function} fn A resolver function that may not be trusted 
* @param {Function} onFulfilled 
* @param {Function} onRejected  
* /
function doResolve(fn, onFulfilled, onRejected) {
    var done = false; 
    try { 
        fn(function(value) {
            if (done) return; 
            done = true;  
            onFulfilled(value); },
         function(reason) { 
          if (done) return; 
          done = true;  
          onRejected(reason); });  
    } catch(ex) {
         if (done) return;
         done = true; 
         onRejected(ex); 
      }
} 
3.上面已经完成了一个完整的内部状态机,但我们并没有暴露一个方法去解析或则观察 Promise 。现在让我们开始解析 Promise :
function Promise(fn) { 
... 
doResolve(fn, resolve, reject); 
}

如你所见,我们复用了 doResolve ,因为对于初始化的 fn 也要对其进行控制。 fn 允许调用 resolve 或则 reject 多次,甚至抛出异常。这完全取决于我们去保证 promise 对象仅被 resolved 或则 rejected 一次,且状态不能随意改变。

4.目前,我们已经有了一个完整的状态机,但我们仍然没有办法去观察它的任何变化。我们最终的目标是实现 then 方法,但 done 方法似乎更简单,所以让我们先实现它。

我们的目标是实现 promise.done(onFullfilled, onRejected) :

  • onFulfilled 和 onRejected 两者只能有一个被执行,且执行次数为一
  • 该方法仅能被调用一次, 一旦调用了该方法,则 promise 链式调用结束
  • 无论是否 promise 已经被解析,都可以调用该方法
var PENDING = 0; // 进行中 
var FULFILLED = 1; // 成功 
var REJECTED = 2; // 失败  
function Promise() { 
    var state = PENDING;  // 存储PENDING, FULFILLED或者REJECTED的状态 
    var value = null;  // 存储成功或失败的结果值  
    var handlers = []; // 存储成功或失败的处理程序,通过调用`.then`或者`.done`方法  
    // 成功状态变化  
    function fulfill(result) {  
        state = FULFILLED;  
        value = result; 
        handlers.forEach(handle);  
        handlers = null;  
     } 
    // 失败状态变化  
    function reject(error) {  
        state = REJECTED; 
        value = error;  
        handlers.forEach(handle); 
        handlers = null;  
    } 
    function resolve(result) {   
        try { 
            var then = getThen(result);  
            if (then) {   
                doResolve(then.bind(result), resolve, reject) 
                return  
             }  
             fulfill(result); 
        } catch (e) {
             reject(e); 
        } 
    }
    // 不同状态,进行不同的处理  
    function handle(handler) { 
        if (state === PENDING) {  
            handlers.push(handler); 
        } else {  
            if (state === FULFILLED && typeof handler.onFulfilled === 'function') {  
                handler.onFulfilled(value); 
            }  
             if (state === REJECTED && typeof handler.onRejected === 'function') { 
                 handler.onRejected(value);  
             } 
        }  
    } 

    this.done = function (onFulfilled, onRejected) {  
        // 保证异步 
        setTimeout( 
            function () { 
                handle({ 
                    onFulfilled: onFulfilled,  
                    onRejected: onRejected });  
            }, 0); 
    }  
    doResolve(fn, resolve, reject); 
 }

当 Promise 被 resolved 或者 rejected 时,我们保证 handlers 将被通知。

5.现在我们已经实现了 done 方法,下面实现 then 方法就很容易了。需要注意的是,我们要在处理程序中新建一个 Promise 。
this.then = function (onFulfilled, onRejected) { 
var self = this; 
return new Promise( 
function (resolve, reject) {  
    return self.done(
    function (result) { 
        if (typeof onFulfilled === ‘function’) {  
            try {  
                // onFulfilled方法要有返回值!  
                return resolve(onFulfilled(result));  
            } catch (ex) {  
                return reject(ex);  
            } 
        } else {  
            return resolve(result);
        }  
    },  
    function (error) {  
        if (typeof onRejected === ‘function’) {  
            try { 
                return resolve(onRejected(error));
            } catch (ex) {  
                return reject(ex);  
            }  
        } else {  
            return reject(error);  
        } 
    });  
    });  
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容