实现一个 Promise
对前端感兴趣的小伙伴，可以关注我的 Github
做为一名IT界比较少的物种 “程序媛”，经常会把 “感觉” 挂在嘴边，由于有过设计的背景，童鞋们都会觉得这只是一个女性化艺术化的词汇，emm...... 也有大佬把“感觉” 与 “经验” 划上等号，其实这是很片面的，在我看来“感觉” = “经验” + “创造”，而创造离不开知其然知其所以然，so....要对码代码这件事情有感觉，就要深入底层，多造轮子，慢慢的就爱上啦....
有兴趣可以查看官方实现
Promise 是什么
Promise 主要就是为了解决异步回调的问题。
用 Promise 来处理异步回调使得代码层次清晰，便于理解，且更加容易维护，符合开放封闭原则。
Promise 场景
先宏观感受一下 Promise 的使用
面试题：后端分两次返回数据，第一次返回 ID 数组，第二次根据第一次返回的 ID 去请求数据
const ids = [1, 2, 3, 4, 5]
const data = {
1: 'data1',
2: 'data2',
3: 'data3',
4: 'data4',
5: 'data5',
}
resData = (data) => (
new Promise((resolve, request) => {
setTimeout(resolve, 1000, data, )
})
)
resData(ids).then((ids) => {
ids.forEach((id) => {
resData(data).then(
console.log(data[id])
)
})
}).catch(e => {
console.log(e);
})
最终我们写的promise同样可以实现这个功能
实现MyPromise
Promise 有三种状态：
-
Pending: 进行中
-
Resolved: 已成功
-
Rejected: 已失败
先定义三个标识状态的变量：
// 三种状态
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
我们需要两个私有变量：
-
标识Promise当前的状态：currentState
-
记录Promise的最终值：value
我们自己不能实现内部属性，JS中私有属性特性(#修饰符现在还是提案)暂时也没有支持，所以暂且用"_"前缀规定私有属性，这样就模拟了Promise 中的两个内部属性。
实现骨架
实现三个静态方法及一个原型方法
-
resolve
-
reject
-
catch
-
then
function MyPromise(fn) {
let _this = this;
_this.currentState = PENDING;
_this.value = undefined;
// 用于保存 then 中的回调，
// 只有当 promise 状态为 pending 时，才会缓存，
// 并且每个实例至多缓存一个
_this.resolvedCallbacks = [];
_this.rejectedCallbacks = [];
_this.resolve = function (value) {
// ...
}
_this.reject = function (reason) {
// ...
}
try {
fn(_this.resolve, _this.reject)
} catch(e) {
_this.reject(e)
}
}
MyPromise.prototype.execute = function(executor) {
// ...
}
MyPromise.prototype.then = function(onResolved, onRejected) {
// ...
}
实现 resolve 和 reject
可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。
// 如果 value 是个Promise，递归执行
if(value instanceof MyPromise) {
return value.then(_this.resolve, _this.reject)
}
// 异步执行，保证执行顺序
setTimeout(() => {
if(_this.currentState === PENDING) {
_this.currentState = RESOLVED
_this.value = value
_this.resolvedCallbacks.forEach(cb => cb())
}
})
_this.reject = function (reason) {
setTimeout(() => {
if(_this.currentState === PENDING) {
_this.currentState = REJECTED
_this.value = reason
_this.rejectedCallbacks.forEach(cb => cb())
}
})
}
实现 then
then 方法内部逻辑稍微复杂点，并且有一点一定一定一定要注意到: then 方法中的回调是异步执行的，思考下下段代码:
console.log(1);
new Promise((resolve,reject)=>{
console.log(2);
resolve();
})
.then(()=>console.log(3));
console.log(4);
执行结果是什么呢？答案其实是:1 2 4 3。传入 Promise 中的执行函数是立即执行完的啊，为什么不是立即执行 then 中的回调呢？因为 then 中的回调是异步执行，表示该回调是插入事件队列末尾，在当前的同步任务结束之后，下次事件循环开始时执行队列中的任务。
大体实现一下 then 的框架：
onResolved 和 onRejected 都是可选的参数，即如果类型不是 function ，需要忽略处理，同时也实现了透传。
当 Promise 的当前状态 Pending 时，缓存实例 (该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 then 调用就失去意义了）；否则异步执行传入的onResolved 或者 onRejected
MyPromise.prototype.then = function(onResolved, onRejected) {
var self = this
// then 必须返回一个新的 promise
var promise2
// onResolved 和 onRejected 都为可选参数
// 如果类型不是 function ，需要忽略，同时也实现了透传
// Promise.resolve(4).then().then(value => console.log(value))
onResolved = typeof onResolved === 'function' ? onResolved : v => v;
onRejected = typeof onRejected === 'function' ? onRejected : r => throw r;
if (self.currentState === RESOLVED) {
return (promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
// 异步执行onResolved
try {
var x = onResolved(self.value);
// resolutionProcedure(promise2, x, resolve, reject);
} catch (reason) {
reject(reason);
}
})
}))
}
if (self.currentState === REJECTED) {
return (promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
// 异步执行onRejected
try {
var x = onRejected(self.value);
// resolutionProcedure(promise2, x, resolve, reject);
} catch (reason) {
reject(reason);
}
})
}))
}
if (self.currentState === REJECTED) {
return (promise2 = new MyPromise((resolve, reject) => {
// 缓存实例到 resolvedCallbacks 或者 rejectedCallbacks
self.resolvedCallbacks.push(function () {
// 考虑到可能会有报错，所以使用 try/catch 包裹
try {
var x = onResolved(self.value);
// resolutionProcedure(promise2, x, resolve, reject);
} catch (r) {
reject(r);
}
});
self.rejectedCallbacks.push(function () {
try {
var x = onRejected(self.value);
// resolutionProcedure(promise2, x, resolve, reject);
} catch (r) {
reject(r);
}
});
}))
}
}
以上就是根据 Promise / A+ 规范来实现的代码，可以通过 promises-aplus-tests 的完整测试
promise 最早是在 commonjs 社区提出来的，当时提出了很多规范。比较接受的是 promise/A 规范。后来人们在这个基础上。提出了 promise/A+规范，也就是实际上的业内推行的规范。ECMAScript 6.0 也是采用的这种规范。
Promise 的缺点
无法取消 Promise，一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise 内部抛出的错误不会反应到外部
当处于 Pending 状态时，无法得知目前进展到哪一个阶段
想找萝卜或者想找坑的童鞋，可以加入我们的“前端内推群”，里面有 BATJ 等大厂的 HR，同时也有精通React、Vue、Node、小程序的大佬。
加小姐姐微信，请她拉你进去。(注明一下你的title哦）
image
网友评论