一步一步实现一个promisea+规范的promise

var fn = new Promise(function (resolve, reject)     
    // 异步操作    
    setTimeout(function()         
        resolve(‘resolve 01‘)        
        // 由于reslove和 reject 是互斥的，因为已经调用了 resolve，这里reject不会执行 
        reject(‘reject 01‘)
    , 500)
)
fn().then(function (data) 
    console.log(‘成功1：‘, data)
    return new Promise(function (resolve, reject) 
        reject(‘reject 02‘)
    
), function (err) 
    console.log(‘失败1：‘, err)
)
.then(function (data) 
    console.log(‘成功2：‘, data)
, function (err) 
    console.log(‘失败2：‘, err)
).then(function (data) 
    console.log(‘成功2：‘, data), function (err) 
    console.log(‘失败2：‘, err)
)

可以看到，Promise 通常会有这些特性：

一，Promise 类的实现

var Promise = function (executor) 
    console.log(‘证明不是用的原生 Promise‘)
    var _this = this
    this.status = ‘pending‘
     // 默认状态，可以转化为 resolved 和 rejected
    this.successVal = undefined
    this.failVal = undefined

    // 执行了成功或失败后，要将状态对应修改成成功和失败
    function resolve (val) 
        if ( _this.status === ‘pending‘ ) 
            _this.status = ‘resolved‘
            _this.successVal = val
        
    
    function reject (val) 
        if ( _this.status === ‘pending‘ ) 
            _this.status = ‘rejected‘
            _this.failVal = val
        
    

    try 
        // 应该还记得，Promise 的参数是一个函数吧，我们称之为 executor（执行器）
        // 同时这个函数接收2个参数，分别是成功和失败的回调函数
        executor(resolve, reject)
     catch (e) 
        // 如果发生异常，直接reject捕获
        reject(e)
    

// then 方法接收2个参数，分别是成功和失败的回调函数
Promise.prototype.then = function (onFulfilled, onRejected) 
    var _this = this    
    // 显然要根据当前状态来执行成功或失败的回调了
    if ( _this.status === ‘resolved‘ ) 
        onFulfilled(_this.successVal)
    
    if ( _this.status === ‘rejected‘ ) 
        onFulfilled(_this.failVal)
    

var fn = new Promise(function (resolve, reject) 
    resolve(‘oooook~‘)
) 
fn.then(function (data) 
    console.log(‘success: ‘, data), function (err) 
    console.log(‘err: ‘, err)
)

结果看上去很美。但如果改成下面这样呢？

var fn = new Promise(function (resolve, reject) 
    setTimeout(function () 
        resolve(‘oooook~‘)
    , 500)
) 
fn.then(function (data) 
    console.log(‘success: ‘, data)
, function (err) 
    console.log(‘err: ‘, err)
)

var Promise = function (executor) 
    console.log(‘证明不是用的原生 Promise 的一句废话‘)
    var _this = this    this.status = ‘pending‘
     // 默认状态，可以转化为 resolved 和 rejected
    this.successVal = undefined
    this.failVal = undefined
    // ----------------- 表示新增代码 --------------------    // 用于存放成功和失败的回调
    this.onFulfilledList = []
    this.onRejectedList = []

    function resolve (val) 
        if ( _this.status === ‘pending‘ ) 
            _this.status = ‘resolved‘
            _this.successVal = val
            // -------------- 执行所有的成功回调 ---------------
            _this.onFulfilledList.forEach(function(fn)
                fn()
            )
        
    
    function reject (val) 
        if ( _this.status === ‘pending‘ ) 
            _this.status = ‘rejected‘
            _this.failVal = val
            // -------------- 执行所有的失败回调 ---------------
            _this.onRejectedList.forEach(function(fn)
                fn()
            )
        
    
    try 
        executor(resolve, reject)
     catch (e) 
        reject(e)
    

Promise.prototype.then = function (onFulfilled, onRejected) 

    var _this = this

    if ( _this.status === ‘resolved‘ ) 
        onFulfilled(_this.successVal)
    
    if ( _this.status === ‘rejected‘ ) 
        onFulfilled(_this.failVal)
    

    // ----------------- 对异步调用的处理 -------------------
    // 说明：如果是异步调用，走到 then 方法里的时候，status 还没有被修改，仍然
    // 是 pending 状态，所以这时候需要再回去执行 executor 里的对应方法，而对应的
    // 方法会将对应的存放回调的 list 里的方法执行(类似发布-订阅模式一样的处理)
    if ( _this.status === ‘pending‘ ) 
        _this.onFulfilledList.push(function () 
            onFulfilled(_this.successVal)
        )
        _this.onRejectedList.push(function () 
            onRejected(_this.failVal)
        )
    

目前来看已经支持异步了~

听说你们都在黑我大星爵？星爵那么萌，你们忍心吗

下一篇：一步一步来实现一个Promise A+规范的 Promise之二：Promise 链式调用