ES6出来很久了，日常开发中经常用到，但是原理比较陌生，最近看了一下Promise/A+规范，实现了一个简易版Promise。

1. Promise 基本用法

const promise = new Promise(function(resolve, reject){
    setTimeout(()=>{
        resolve('resolved')
    })
});

promise.then(function(res){
    console.log(res)
})

2. Promise 状态和值

Promise 对象存在以下三种状态：

Pending(进行中)
Fulfilled(已成功)
Rejected(已失败)

状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ，且状态改变之后不会在发生变化，会一直保持这个状态.

Promise 的值是指状态改变时传递给回调函数的值

上文中handle函数包含 resolve 和 reject 两个参数，它们是两个函数，可以用于改变 Promise 的状态和传入 Promise 的值

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('FULFILLED')
  }, 1000)
})

这里 resolve 传入的 "FULFILLED" 就是 Promise 的值
resolve 和 reject

resolve : 将Promise对象的状态从 Pending(进行中) 变为 Fulfilled(已成功)
reject : 将Promise对象的状态从 Pending(进行中) 变为 Rejected(已失败)
resolve 和 reject 都可以传入任意类型的值作为实参，表示 Promise 对象成功（Fulfilled）和失败（Rejected）的值
了解了 Promise 的状态和值，接下来，我们为 MyPromise 添加状态属性和值

// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

3. Promise构造函数

function MyPromise(fun) {
        const _this = this;
        // 默认状态
        this.state = PEDDING;
        // 成功值
        this.value = undefined;
        // 错误值
        this.reason = undefined;
        // 成功回调集合
        this.fulfilleds = [];
        // 失败回调集合
        this.rejecteds = [];
        
        function resolve(value){
            // 为了适应同步函数，在主线程完成后执行 
            setTimeout(function(){
                if(_this.state === PEDDING){
                    _this.state = FULFILLED;
                    _this.value = value;
                    _this.fulfilleds.forEach(cb => cb(_this.value));
                }
            })
        };

        function reject(value){
         // 为了适应同步函数，在主线程完成后执行
            setTimeout(function(){
                if(_this.state === PEDDING){
                    _this.state = REJECTED;
                    _this.reason = value;
                    _this.rejecteds.forEach(cb => cb(_this.reason));
                }
            })
        };
    
     // 捕获参数执行方法的错误
        try {
            fun(resolve, reject)
        } catch(e) {
            reject(e)
        }
    }

4. Promise 的 then 方法

Promise 对象的 then 方法接受两个参数：onFulfilled 和 onRejected。

    promise.then(onFulfilled, onRejected)

onFulfilled:

当 promise 状态变为成功时必须被调用，其第一个参数为 promise 成功状态传入的值（ resolve 执行时传入的值）
在 promise 状态改变前其不可被调用
其调用次数不可超过一次

onRejected:

当 promise 状态变为失败时必须被调用，其第一个参数为 promise 失败状态传入的值（ reject 执行时传入的值）
在 promise 状态改变前其不可被调用
其调用次数不可超过一次

多次调用
then 方法可以被同一个 promise 对象调用多次

当 promise 成功状态时，所有 onFulfilled 需按照其注册顺序依次回调
当 promise 失败状态时，所有 onRejected 需按照其注册顺序依次回调

返回
then 方法必须返回一个新的 promise 对象

promise2 = promise1.then(onFulfilled, onRejected);

因此 promise 支持链式调用

promise.then(onFulfilled, onRejected).then(onFulfilled, onRejected);

5. Promise 的 then 实现

MyPromise.prototype.then = function(resolve,reject){
        const _this = this;
        const OnResolve = typeof resolve === 'function' ? resolve : val=>val;
        const OnReject = typeof reject === 'function' ? reject : val=> {throw val};

        return new MyPromise(function(onFulfilled, onRejected){
            const fulfilled = val =>{
                try {
                    // 外层传递的resolve函数返回值是不是MyPromise类
                    const res = resolve(val)
                    if(res instanceof MyPromise){
                        res.then(onFulfilled, onRejected)
                    }else{
                        onFulfilled(res)
                    }

                } catch(e) {
                    onRejected(e);
                }
                
            };
            const rejected  = val =>{
                try {
                    // 外层传递的resolve函数返回值是不是MyPromise类
                    const res = reject(val)
                    if(res instanceof MyPromise){
                        res.then(onFulfilled, onRejected)
                    }else{
                        onFulfilled(res)
                    }
                    
                } catch(e) {
                    onRejected(e);
                }
                
            };
            // 如果状态为pendding,添加成功/失败回调集合
            if(_this.state === PEDDING){
                _this.fulfilleds.push(fulfilled);
                _this.rejecteds.push(rejected);
             };
            // 如果已经成功，直接把结果值传入回调函数
             if(_this.state === FULFILLED){
                resolve(_this.value)
             };
             // 如果失败，直接把结果值传入回调函数
             if(_this.state === REJECTED){
                reject(_this.reason)
             }
        });
    };

6. 最后

至此一个简易版的Promiss类已经完成；

同步例子：

     new MyPromise(function(resolve,reject){
        resolve(2)
    }).then(function(v){
        console.log(v);
        return ++v;
    }).then(function(v){
        console.log(v);
        return ++v;
    }).then(function(v){
        console.log(v);
        return ++v; 
    })

结果：

2
3
4

异步例子：

     new MyPromise(function(resolve,reject){
        setTimeout(function(){
            resolve(2)
        },3000)
    }).then(function(v){
        console.log(v);
        return ++v;
    }).then(function(v){
        console.log(v);
        return ++v;
    }).then(function(v){
        console.log(v);
        return ++v;
    })

结果：

2
3
4

PS：欢迎大家关注我的公众号【前端专刊】，一起加油吧~

前端专刊

Promise实现原理（附源码）