一步一步实现一个Promise A+规范的 Promise

Posted 2020-11-30 homehtml

2015年6月，ES2015（即ES6）正式发布后受到了非常多的关注。其中很重要的一点是 Promise 被列为了正式规范。

在此之前很多库都对异步编程/回调地狱实现了类 Promise 的应对方案，比如 bluebird、Angular 的 Q 和大名鼎鼎的 jQuery 的 deffered 等。

为了便于理解，本文将分为三个部分，每个部分实现 Promise 的一部分特性，最终一步一步的实现一个完整的、遵循 promise A+ 规范的 Promise。

Promise A+ 规范规定，Promise 有三种状态，分别是 pending（默认状态，代表等待）、fulfilled（代表成功）、rejected（代表失败）。

来看看 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 类有 then 方法，then 方法有两个参数，分别是 Promise 成功和失败的回调，且二者互斥，调用了其中一个，另外一个就不会执行

②、Promise 支持链式调用，then 的返回值可以是一个 Promise，也可以是一个普通值，如果是 一个普通的值，那么就会当做下一个 then 成功的回调函数的参数

③、Promis 还有其它扩展方法

说了一堆有的没的，下面就开始来实现这个东西吧~

=================================================

一，Promise 类的实现

=> Promise 有 then 方法：

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)
})

结果：

ok，问题来了，Promise 费大力气搞出来可不是只能做同步调用的，毕竟有了 ajax 之后前端才会发展到今天这么繁荣，所以需要让我们的 Promise 支持异步。

修改如下（注释内是对新增代码的说明）：

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 链式调用