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

一步一步实现一个Promise A+规范的 Promise的更多相关文章

  1. 手写一款符合Promise/A+规范的Promise

    手写一款符合Promise/A+规范的Promise 长篇预警!有点长,可以选择性观看.如果对Promise源码不是很清楚,还是推荐从头看,相信你认真从头看到尾,并且去实际操作了,肯定会有收获的.主要 ...

  2. 手写符合Promise/A+规范的Promise

    const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "r ...

  3. 手写基于Promise A+规范的Promise

    const PENDING = 'pending';//初始态const FULFILLED = 'fulfilled';//初始态const REJECTED = 'rejected';//初始态f ...

  4. 按照 Promise/A+ 规范逐行注释并实现 Promise

    0. 前言 面试官:「你写个 Promise 吧.」 我:「对不起,打扰了,再见!」 现在前端越来越卷,不会手写 Promise 都不好意思面试了(手动狗头.jpg).虽然没多少人会在业务中用自己实现 ...

  5. Promise原理—一步一步实现一个Promise

    promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pending到rejected ...

  6. 剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类

    本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,建议先了解Promise的使用 Promise标准解读 1.只有一个then方法,没有catch,ra ...

  7. 教你一步一步实现一个Promise

    Promise我想现在大家都非常熟悉了,主要作用就是解决异步回调问题,这里简单介绍下. Promise规范是CommonJS规范之一,而Promise规范又分了好多种,比如 Promises/A.Pr ...

  8. 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  9. 如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成

    阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...

随机推荐

  1. vue-cli3配置eslint

    一.默认配置 以下是package.json文件中关于的eslint默认配置 "eslintConfig": { "root": true, "env ...

  2. HDU3085NightmareII题解--双向BFS

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3085 分析 大意就是一个男孩和一个女孩在网格里,同时还有两个鬼,男孩每轮走三步,女孩每轮走一步,与鬼曼 ...

  3. Excel学习笔记:行列转换

    目录 offset函数 行列转换的三种方式 1.右键转置 2.转置公式TRANSPOSE 3.引用函数OFFSET+ROWS/COLUMN(支持随时更新数据) 一行(列)转多行多列 offset函数 ...

  4. Python学习笔记:利用爬虫自动保存图片

    兴趣才是第一生产驱动力. Part 1 起先,源于对某些网站图片浏览只能一张一张的翻页,心生不满.某夜,冒出一个想法,为什么我不能利用爬虫技术把想看的图片给爬下来,然后在本地看个够. 由此经过一番初尝 ...

  5. video 轮播视频

    <video controls :src="product.videoUrl" :poster="resURL + defaultImg">< ...

  6. 利用 Monitor.TryEnter 来规避 .NET 线程死锁的源代码

    在开发多线程的应用程序时,我们会大量用到 lock (...) {} 块.如果 lock 的对象比较多,非常容易发生死锁.死锁的发生很难预料,而且一旦发生在界面线程上,界面就不再刷新响和应用户输入:如 ...

  7. Java学习笔记【七、时间、日期、数字】

    参考:http://www.runoob.com/java/java-date-time.html Date类 构造: Date() 使用当前的日期时间 Date(long millisec) 197 ...

  8. Kubernetes介绍与核心组件

    Kubernetes是什么? Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. Kubernetes 特点 可移植: 支持公有云,私有云 ...

  9. git tag 重写

    有的时候我们想要在git的master分支中插入一个tag,这个时候就需要我们先删除一个不重要的tag,然后切到我们想要提交内容的地方,重新打tag. 例如:在master分支上修改提交,在commi ...

  10. ioping测试

    ioping 一个实时显示磁盘io延时的工具,以类似ping 的输出一样展示输出结果 常用参数: -c count stop after count requests. -i interval Set ...