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

·  阅读 1439
一步一步实现一个Promise A+规范的 Promise
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 链式调用


分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改