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)
}
}
来试试效果：
扫描二维码关注公众号，回复：
7745523 查看本文章
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)
})
}
}
