媒介

本文的promise源码是按照Promise/A+规范来编写的(不想看竽暌耿文版的移步Promise/A+规范中文翻译)

引子

为了让大年夜家更轻易懂得，我们年腋荷琐场景开端讲解，让大年夜家一步一步跟着思路思虑，信赖你必定会更轻易看懂。

推敲下面一种获取用户id的请求处理

//例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, 
 
        callbacks = [];  //callbacks为数组，因为可能同时有很多个回调 
 
  
 
    this.then = function (onFulfilled) { 
 
        callbacks.push(onFulfilled); 
 
    }; 
 
  
 
    function resolve(value) { 
 
        callbacks.forEach(function (callback) { 
 
            callback(value); 
 
        }); 
 
    } 
 
  
 
    fn(resolve); 
 
}  

上述代码很简单，大年夜致的逻辑是如许的：

1. 调用then办法，将想要在Promise异步操作成功时履行的回调放入callbacks队列，其实也就是注册回调函数，可以向不雅察者模式偏向思虑;
2. 创建Promise实例时传入的函数会被付与一个函数类型的参数，即resolve，它接收一个参数value，代表异步操作返回的结不雅，当一步操作履行成功后，用户会调用resolve办法，这时刻其拭魅真正履行的操作是将callbacks队列中的回调一一履行;

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

信赖细心的人应当可以看出来，then办法应当可以或许链式调用，然则膳绫擎的最基本简单的版本显然无法支撑链式调用。想让then办法支撑链式调用，其实也是很简单的：

　　推荐阅读

　　2017年上半年重大黑客事件盘点

16. 美国法律论坛71万账户泄漏，涉国度安然局、FBI等本年4月，达拉斯紧急警备孀体系被黑客入侵。导致该城市的156个紧急戒备器被激活，警笛声持续一个小时，激发市平易近惊恐。 在以前的201>>>详细阅读

本文标题：30分钟，让你彻底明白Promise原理

地址：http://www.17bianji.com/lsqh/35631.html

 1/2    1