一步一步实现一个Promise A+规范的 Promise
2024-10-06 22:47:27
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)
})
}
}看看效果：
最新文章
- WPF菜单
- C#引用类型（class)和值类型(struct)
- 深度优先搜索 codevs 1064 虫食算
- Practical Java
- http://www.360doc.com/content/12/1014/00/7471983_241330790.shtml
- volley(3) 参数{or_barcode:or_barcode,or_remai:or_remain, bar_remain:bar_remain} method:POST
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
- 【Cocos2d入门教程五】Cocos2d-x动作篇
- debian 颜色设置
- w530 在ubuntu 12.04 _x64 背光调节方法
- Swift入门教程:基本语法(一)
- Mock5 moco框架中post请求如何加入cookies
- redis 10个问题
- [knowledge][perl][pcre][sed] sed / PCRE 语法/正则表达式
- 【原创】<笔试题> 深圳市天软科技开发有限公司
- 教你通过Node.js漏洞完成渗透测试
- IP基础知识与分配实现
- IE6 CSS高度height:100% 无效解决方法总结
- CentOS7.4 部署 Django + Python3 + Apache + Mod_wsgi
- 微信小程序-简易计算器