手写一个Promise

发表于 | 分类于 | 评论数：


背景

Promise是为了解决Javascript回调嵌套过多导致回调地狱（callbackhell）而产生的。目前已被纳入了es2015规范，主流浏览器都支持Promise。为了在工作中更好的运用Promise,我们需要理解Promise规范与内部实现机制，下面我们来手动实现一个Promise。

Promise/A+规范

在写代码之前让我们先了解下 Promise/A+规范。
一个promise有三种状态：

  • pending:表示初始状态，可以转移到 fullfilled 或者 rejected 状态
  • fulfilled:表示操作成功，不可转移状态
  • rejected:表示操作失败，不可转移状态
  • 必须有一个 then 异步执行方法，then 接受两个参数且必须返回一个promise：

借用这张来自MDN的流程图我们可以清晰的看到 Promise 状态的流转过程。

简单版

下面我们来实现一个简单版的 Promise:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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 加入异步功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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);
      }
  })
}

以上代码中，我们做了如下更改：

  1. 将 Promise 三个状态定义为常量，方便维护
  2. 对于 Promise resolve和reject 函数执行加入异步处理
  3. 在Promise.then中返回新的Promise对象，使Promise可以支持链式调用

错误处理以及静态方法

下面让我们来为Promise 添加错误处理以及静态方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//错误处理
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外面，这样就不会产生刚才的问题了，更改后代码长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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。这里给我的最大启发是如果我们想学习一个东西，必须深入到它的底层，了解它的运行原理与具体实现方法，并且可以造一个简单的轮子，这样才算我们掌握了该知识点。从前的我对于这一点没有关注的太多，导致在用某个知识点时只是掌握的它的表层用法，在高级一点的使用场景时完全不会运用。以后我会更加注重源码方面的学习，弥补我这方面的不足。