背景
Promise是为了解决Javascript回调嵌套过多导致回调地狱(callbackhell)而产生的。目前已被纳入了es2015规范,主流浏览器都支持Promise。为了在工作中更好的运用Promise,我们需要理解Promise规范与内部实现机制,下面我们来手动实现一个Promise。
Promise/A+规范
在写代码之前让我们先了解下 Promise/A+规范。
一个promise有三种状态:
- pending:表示初始状态,可以转移到 fullfilled 或者 rejected 状态
- fulfilled:表示操作成功,不可转移状态
- rejected:表示操作失败,不可转移状态
- 必须有一个 then 异步执行方法,then 接受两个参数且必须返回一个promise:
借用这张来自MDN的流程图我们可以清晰的看到 Promise 状态的流转过程。
简单版
下面我们来实现一个简单版的 Promise:
javascript copyable">function Promise1(executor){
let self = this;
self.status = 'pending';
self.value = undefined;
self.reason = undefined;
function resolve(value) {
if(self.status==='pending'){
self.status = 'fullfilled';
self.value = value;
}
}
function reject(reason) {
if(self.status==='pending') {
self.status = 'rejected';
self.reason = reason;
}
}
try{
executor(resolve,reject);
}catch(e) {
reject(e);
}
}
Promise1.prototype.then = function(onFullfilled,onRejected) {
if(this.status==='fullfilled') {
onFullfilled(this.value);
}
if(this.status==='rejected') {
onRejected(this.reason);
}
}
//测试
let p= new Promise1(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1
复制代码
支持异步
现在,我们实现了最简单的 Promise。以上版本的Promise是存在很多问题的。为什么呢?最大的问题是它不支持异步,然而在现实中,Promise绝大多数使用场景都是异步。让我们来为 Promise 加入异步功能。
javascript copyable">const PENDING = 'pending';
const FULFILLED = 'fullfilled';
const REJECTED = 'rejected';
function Promise1(executor){
let self = this;
self.status = PENDING;
self.value = undefined;
self.reason = undefined;
self.fullfilledCallbacks = [];
self.rejectedCallbacks = [];
function resolve(value) {
if(value instanceof Promise) {
value.then(resolve,reject);
}
setTimeout(function(){
if(self.status===PENDING){
self.status = FULFILLED;
self.value = value;
self.fullfilledCallbacks.forEach(function(cb){
cb(self.value)
})
}
})
}
function reject(reason) {
setTimeout(function(){
if(self.status===PENDING) {
self.status = REJECTED;
self.reason = reason;
self.rejectedCallbacks.forEach(function(cb){
cb(self.reason);
})
}
})
}
try{
executor(resolve,reject);
}catch(e) {
reject(e);
}
}
Promise1.prototype.then = function(onFulfilled,onRejected) {
let self = this;
return new Promise1(function(resolve,reject){
function success(value) {
let _value = (typeof onFulfilled === 'function' && onFulfilled(value)) || value;
resolve(_value)
}
function error(reason) {
let _reason = (typeof onRejected === 'function' && onRejected(reason)) || reason;
reject(_reason);
}
if(self.status==PENDING) {
self.fullfilledCallbacks.push(success);
self.rejectedCallbacks.push(error);
} else if(self.status==FULLFILLED){
success.call(this,this.value)
} else if(self.status==REJECTED) {
error.call(this,this.reason);
}
})
}
复制代码
以上代码中,我们做了如下更改:
- 将 Promise 三个状态定义为常量,方便维护
- 对于 Promise resolve和reject 函数执行加入异步处理
- 在Promise.then中返回新的Promise对象,使Promise可以支持链式调用
错误处理以及静态方法
下面让我们来为Promise 添加错误处理以及静态方法:
javascript copyable">//错误处理
Promise1.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
}
//返回fullfilled Promise对象
Promise1.resolve = function (value) {
return new Promise1(resolve => {
resolve(value);
});
}
//返回 rejected Promise 对象
Promise1.reject = function (reason) {
return new Promise1((resolve, reject) => {
reject(reason);
});
}
//Promise.all方法
Promise1.all = function(promises) {
function gen(length, resolve) {
let count = 0;
let values = [];
return function(i, value) {
values[i] = value;
if (++count === length) {
resolve(values);
}
}
}
return new Promise1((resolve, reject) => {
let done = gen(promises.length, resolve);
promises.forEach((promise, index) => {
promise.then((value) => {
done(index, value)
}, reject)
})
})
}
//Promise.race方法
Promise1.race = function(promises) {
return new Promise1((resolve, reject) => {
promises.forEach((promise, index) => {
promise.then(resolve, reject);
});
});
}
复制代码
这里有个问题,就是在当我们console.log(Promise1.resolve('a'))的时候,我发现打印出来的状态竟然是 pending状态,我猜想原因是应该是resolve中函数异步执行,在当我们console的时候setTimeout中代码未执行,所以我给出的解决方法是将状态变化与赋值移到setTimeout外面,这样就不会产生刚才的问题了,更改后代码长这样:
javascript copyable">function resolve(value) {
if(value instanceof Promise) {
value.then(resolve,reject);
}
self.status = FULFILLED;
self.value = value;
setTimeout(function(){
if(self.status===PENDING){
self.fullfilledCallbacks.forEach(function(cb){
cb(self.value)
})
}
})
}
function reject(reason) {
self.status = REJECTED;
self.reason = reason;
setTimeout(function(){
if(self.status===PENDING) {
self.rejectedCallbacks.forEach(function(cb){
cb(self.reason);
})
}
})
}
复制代码
总结
经过以上实践,我们成功的手写了一个功能完备的 Promise。这里给我的最大启发是如果我们想学习一个东西,必须深入到它的底层,了解它的运行原理与具体实现方法,并且可以造一个简单的轮子,这样才算我们掌握了该知识点。从前的我对于这一点没有关注的太多,导致在用某个知识点时只是掌握的它的表层用法,在高级一点的使用场景时完全不会运用。以后我会更加注重源码方面的学习,弥补我这方面的不足。