一步一步实现一个Promise A+规范的 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 类的实现
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)
})
结果:
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/A+规范的Promise
手写一款符合Promise/A+规范的Promise 长篇预警!有点长,可以选择性观看.如果对Promise源码不是很清楚,还是推荐从头看,相信你认真从头看到尾,并且去实际操作了,肯定会有收获的.主要 ...
- 手写符合Promise/A+规范的Promise
const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "r ...
- 手写基于Promise A+规范的Promise
const PENDING = 'pending';//初始态const FULFILLED = 'fulfilled';//初始态const REJECTED = 'rejected';//初始态f ...
- 按照 Promise/A+ 规范逐行注释并实现 Promise
0. 前言 面试官:「你写个 Promise 吧.」 我:「对不起,打扰了,再见!」 现在前端越来越卷,不会手写 Promise 都不好意思面试了(手动狗头.jpg).虽然没多少人会在业务中用自己实现 ...
- Promise原理—一步一步实现一个Promise
promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pending到rejected ...
- 剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,建议先了解Promise的使用 Promise标准解读 1.只有一个then方法,没有catch,ra ...
- 教你一步一步实现一个Promise
Promise我想现在大家都非常熟悉了,主要作用就是解决异步回调问题,这里简单介绍下. Promise规范是CommonJS规范之一,而Promise规范又分了好多种,比如 Promises/A.Pr ...
- 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成
阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...
随机推荐
- JS基础_赋值运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- im_master_search_specification
中文 http://accel-archives.intra-mart.jp/2014-winter/document/iap/public_zh_CN/im_master/im_master_sea ...
- 读书笔记《Oracle从入门到精通》
目录 一.SQL基础 1.SQL种类 2.常用数据类型 3.DDL 4.约束 5.DML语句 二.SELECT语句 1.结果集'*'与指定列 2.拼接符 || 3.substr函数 4.instr函数 ...
- Linux下Mysql 不能访问新数据文件夹问题
新挂载的盘,打算将数据文件夹配置到 /data/mysql,却无法启动mysqld. 除了将目录授权给mysql用户和组以外 chown -R mysql:mysql /data/mysql 太需要将 ...
- CAN总线简介:如何以编程方式控制汽车
最近,我正与Voyage公司的朋友合作研究,以实现福特Fusion空调系统(A/C)的编程控制.目前,Voyage公司正努力打造自动驾驶的终极目标:能够以低廉的价格成本和广泛的投放范围,把世界任何地方 ...
- git tag 重写
有的时候我们想要在git的master分支中插入一个tag,这个时候就需要我们先删除一个不重要的tag,然后切到我们想要提交内容的地方,重新打tag. 例如:在master分支上修改提交,在commi ...
- GridView 二维排布
与ListView一维排布相对 public class MainActivity extends Activity implements AdapterView.OnItemClickListene ...
- three.js之创建一条直线
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first thr ...
- Linux根文件系统和目录结构及bash特性4
文件管理工具:cp,mv,rm cp命令:copy cp命令主要用于复制文件或目录 语法: 单源复制 cp [OPTION]... [- ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...