实现一个符合promiseA+规范的promise

关于异步的解决方案目前有四种：

• callback(回调函数)
• generato + co库
• promise
• async+await

promise的基本特点：

1. promise代表的是承诺的意思 promise最核心的就是有三个状态,等待态(pending), 成功态(fulfilled)
   ,失败态(rejected)
2. 状态只能从等待态改变成其他状态 ，不能从成功变成失败，也不能从失败变成成功
3. 默认你传入的executor会立刻执行, 这个executor函数接受两个参数 resolve,reject 都是函数类型
4. 在代码中发生异常也是会走失败的情况

封装基本的promise ：

// 三个状态
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
class Promise {
    constructor(executor) { // 用户传入一个executor
        this.status = PENDING;
        this.value = undefined;
        this.reason = undefined;
        this.onResolvedCallbacks = []; // 存放成功的回调的
        this.onRejectedCallbacks = []; // 存放失败的回调的
        const resolve = (value) => {
            if (this.status === PENDING) {
                this.status = FULFILLED
                this.value = value;
                this.onResolvedCallbacks.forEach(fn=>fn());
            }
        }
        const reject = (reason) => {
            if (this.status === PENDING) {
                this.status = REJECTED
                this.reason = reason;
                this.onRejectedCallbacks.forEach(fn=>fn());
            }
        }
        try {
            executor(resolve, reject); 
        } catch (e) {
            reject(e);
        }
    }
    then(onFulfilled, onRejected) { 
        //调用then的时候来判断成功还是失败
        if(this.status ===FULFILLED ){
            onFulfilled(this.value);
        }
        if(this.status === REJECTED){
            onRejected(this.reason)
        }
        if(this.status === PENDING){
            this.onResolvedCallbacks.push(()=>{
                onFulfilled(this.value);
            });
            this.onRejectedCallbacks.push(()=>{
                onRejected(this.reason);
            })
        }
    }
}

测试验证：

let promise = new Promise((resolve,reject)=>{ 
    setTimeout(()=>{
      resolve('1111');
    },1500)
});
promise.then((value)=>{ 
    console.log('success',value)
},(reason)=>{ 
    console.log('fail',reason)
})
promise.then((value)=>{ 
    console.log('success',value)
},(reason)=>{ 
    console.log('fail',reason)
})

封装完基本版本后，还存在的问题：
1.then不是异步的，如果直接调用resolve完后是同步执行,比如：

let promise = new Promise((resolve,reject)=>{ 
  resolve('1111');
});
promise.then((value)=>{ 
    console.log('success',value)
},(reason)=>{ 
    console.log('fail',reason)
})
promise.then((value)=>{ 
    console.log('success',value)
},(reason)=>{ 
    console.log('fail',reason)
})
console.log('end');

结果是先输出：success 1111，再试end
2.我们newPromise 直接resolve了 ，会将resolve的参数传递到了下一次then中，then中传递的成功和失败的回调的返回值, 会决定下一个then 走成功还是失败，比如：

let promise2 = new Promise((resolve,reject)=>{
    resolve('ok')
})

promise2.then(data=>{
    return 'next'
},()=>{
    return 'fail'
}).then((data)=>{
    console.log('success',data)
},(err)=>{
    console.log('fail',err)
})

该代码输出的正确结果，应该是 success next，但输出却是报错的，因为then并没有返回值

进阶版promise实现：

const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
function resolvePromise(promise2, x, resolve, reject) {
    if (x) {
        try {
                resolve(x); 
        } catch (e) {
            reject(e); 
        }
    } else {
        resolve(x); // 这里直接成功即可 普通值的情况
    }
}
class Promise {
    constructor(executor) {
        this.status = PENDING;
        this.value = undefined;
        this.reason = undefined;
        this.onResolvedCallbacks = []; // 存放成功的回调的
        this.onRejectedCallbacks = []; // 存放失败的回调的
        const resolve = (value) => {
            if(value instanceof Promise){
                return value.then(resolve,reject)
            }
            if (this.status === PENDING) {
                this.status = FULFILLED
                this.value = value;
                this.onResolvedCallbacks.forEach(fn => fn());
            }
        }
        const reject = (reason) => {
            if (this.status === PENDING) {
                this.status = REJECTED
                this.reason = reason;
                this.onRejectedCallbacks.forEach(fn => fn());
            }
        }
        try {
            executor(resolve, reject); 
        } catch (e) {
            reject(e);
        }
    }
    then(onFulfilled, onRejected) {
        let promise2 = new Promise((resolve, reject) => {
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) { // 执行对应的回调时发生异常就执行promise2的失败
                        reject(e);
                    }
                }, 0);
            }
            if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason)
                        resolvePromise(promise2, x, resolve, reject)
                    } catch (e) { // 执行对应的回调时发生异常就执行promise2的失败
                        reject(e);
                    }
                }, 0);
            }
            if (this.status === PENDING) {
                this.onResolvedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) { // 执行对应的回调时发生异常就执行promise2的失败
                            reject(e);
                        }
                    }, 0)
                });
                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            resolvePromise(promise2, x, resolve, reject)
                        } catch (e) { // 执行对应的回调时发生异常就执行promise2的失败
                            reject(e);
                        }
                    }, 0)
                })
            }
        });

        return promise2
    }
}

结果：

let promise = new Promise((resolve,reject)=>{ 
  resolve('1111');
});
promise.then((value)=>{ 
    console.log('success',value)
},(reason)=>{ 
    console.log('fail',reason)
})
promise.then((value)=>{ 
    console.log('success',value)
},(reason)=>{ 
    console.log('fail',reason)
})
console.log('end');

能正确输出结果：

let promise2 = new Promise((resolve,reject)=>{
    resolve('ok')
})

promise2.then(data=>{
    return 'next'
},()=>{
    return 'fail'
}).then((data)=>{
    console.log('success',data)
},(err)=>{
    console.log('fail',err)
})

正确输出结果：

当然上面进阶版的实现也不是最终完整版的，最终的版本会有很多类型判断，我也是把基本代码跑通了而已，面试的时候，基本版本就够用了，毕竟也不会给这么多时间你写，哈哈

补充：

promiseA+规范中只有then实现的规定，并没有规定其他方法的规则，比如Promise.resolve(),Promise.reject()，等Promise类上的静态方法的实现，起始都是基于promise实例的then去实现的，比如Promise.resolve()的实现如下：

Promise.resolve = function (value) {
        return new Promise((resolve) => {
            resolve(value)
        })
    }