如何实现精简版的Promise(仅30行代码)

网络上面已经有很多Promise的教程了。推荐一下这篇文章

知乎: 史上最易读懂的 Promise/A+ 完全实现

但是本文的目的是为了使用最少量的代码，以达到对Promise的实现有一个初步的了解。

下面是关于代码实现的一些说明

• 代码中暂时不考虑任何异常情况
• Promise对象只支持成功的回调
• Promise支持链式调用
• 本文仅实现两种状态 'pending' 和 'resolved'

第一步 定义Promise的内部变量

self.status = 'pending';//初始状态
self.onResolvedCallback = [];
self.data = undefined;

• status: 保存当前Promise的状态, 初始化时为 pending 状态
• onResolvedCallback: 当Promise还处于pending状态时，将链式调用中的回调函数绑定到数组中
• data: 保存当前Promise的返回值

第二步 定义resolve函数

function resolve(data){
  if(self.status == 'pending'){
    self.status = 'resolved';
    self.data = data;
    self.onResolvedCallback.forEach(callback => callback(data));
  }
}

resolve 函数向外提供了修改当前Promise状态值的方法。并且保存Promise的结果。(如果在Promise 为 pending状态时，有链式回调。那么执行这些回调函数)

第三步 定义then方法

Promise.prototype.then = function(onResolved){
  var self = this;
  if(self.status == 'pending'){
    return new Promise(function(resolve){
      self.onResolvedCallback.push(function(value){
        var result = onResolved(value);
        resolve(result);
      });
    });
  }else{//本文只实现了'pending' 和 'resolved'两种状态，所以没判断rejected相关代码
    return new Promise(function(resolve){
      var result = onResolved(self.data);
      resolve(result);
    });
  }
}

then方法主要实现了两步

• 当Promise处于pending状态，保存回调函数到onResolvedCallback中，返回新的Promise实例
• 当Promise不处于pending状态时，直接获取上一步的返回值(self.data),调用回调函数，返回新的Promise实例

以下为完整的代码

function Promise(executor){
    var self = this;
    self.status = 'pending';
    self.onResolvedCallback = [];
    self.data = undefined;
    
    function resolve(data){
        if(self.status == 'pending'){
            self.status = 'resolved';
            self.data = data;
            self.onResolvedCallback.forEach(callback => callback(data));
        }
    }
    
    executor(resolve);//执行回调函数
}

Promise.prototype.then = function(onResolved){
    var self = this;
    if(self.status == 'pending'){
        return new Promise(function(resolve){
            self.onResolvedCallback.push(function(value){
                var result = onResolved(value);
                resolve(result);
            });
        });
    }else{
        return new Promise(function(resolve){
            var result = onResolved(self.data);
            resolve(result);
        });
    }
}

以下为一个用例

new Promise(function(resolve){
    setTimeout(function(){
        resolve('123');
    }, 3000);
}).then(function(value){
    console.log('then 1', value);
    return value + 1;
}).then(function(value2){
    console.log('then 2', value);
    return value2;
})
//等待3秒后，页面上输出
//then 1: 123
//then 2: 1231