【从0-1分析Promise，并手写一个Promise】

// Promise使用

 const test = new Promise((resolve, reject)=> {
     setTimeout(()=> {
         resolve('请求成功')
     }, 2000)
 })
 test.then((value)=> {
     console.log(value, '7777')
 })

// 思路：
// 1. 首先promise是一个类， 传入一个方法，执行回调，导出 resolve跟reject 方法故结构应该是：

class myPromise {
    constructor(callback) {
        const reslove = ()=> {};
        const reject = ()=> {};
        callback(reslove, reject);
    }
}

**

// 2. promise 有三个状态 pending、fulfilled、rejected 故现在的结构应该是 // reslove
时又传入一个value值， 故需要用一个 result值来储存结果 // reject 时传入错误信息 同样可以存储到
result值来储存结果 // 在reslove ， reject 只有pending时才会执行。 且执行后会改变当前promise的状态
故需要修改promise状态

**

class myPromise {
    constructor(callback) {
        this.state = 'pending'; // 默认状态
        this.result = undefined; // 结果存储
        const reslove = (value)=> {
            if(!this.state === 'pending') return;
            this.result = value;
            this.state = 'fulfilled';
        };
        const reject = (error)=> {
            if(!this.state === 'pending') return;
            this.result = error;
            this.state = 'fulfilled';
        };
        callback(reslove, reject);
    }
}

// 3. 在callback执行时，程序错误也需要错误返回调用 reject方法

class myPromise {
    constructor(callback) {
        this.state = 'pending'; // 默认状态
        this.result = undefined; // 结果存储
        const reslove = (value)=> {
            if(!this.state === 'pending') return;
            this.result = value;
            this.state = 'fulfilled';
        };
        const reject = (error)=> {
            if(!this.state === 'pending') return;
            this.result = error;
            this.state = 'fulfilled';
        };
        try {
            callback(reslove, reject);
        } catch (error) {
            reject(error);
        }
    }
}

到此处 promise 的功能已经实现了， 但是一般情况下还需要使用.then拿到结果，
第一种办法 用promise.then
直接赋值给自己的promise.then
第二种就是要自己手写.then方法
思路：

1. .then 接受两个函数
   一个是正常执行调用函数 onResolved， 一个是异常调用函数 onRejected // .then方法返回的是一个promise对象
   故首先返回的结构应该是 // return ney myPromise () // myPromise 会调用 reslove , reject

class myPromise {
    constructor(callback) {
        this.state = 'pending'; // 默认状态
        this.result = undefined; // 结果存储
        const reslove = (value)=> {
            if(!this.state === 'pending') return;
            this.result = value;
            this.state = 'fulfilled';
        };
        const reject = (error)=> {
            if(!this.state === 'pending') return;
            this.result = error;
            this.state = 'fulfilled';
        };
        try {
            callback(reslove, reject);
        } catch (error) {
            reject(error);
        }
    }
    then(onResolved, onRejected) {
        return new myPromise ((reslove , reject)=> {
        });
    }
}

// 在状态 fulfilled 时才会调用 传入的正常执行事件， rejected 执行异常事件

class myPromise {
    constructor(callback) {
        this.state = 'pending'; // 默认状态
        this.result = undefined; // 结果存储
        const reslove = (value)=> {
            if(!this.state === 'pending') return;
            this.result = value;
            this.state = 'fulfilled';
        };
        const reject = (error)=> {
            if(!this.state === 'pending') return;
            this.result = error;
            this.state = 'rejected';
        };
        try {
            callback(reslove, reject);
        } catch (error) {
            reject(error);
        }
    }
    then(onResolved, onRejected) {
        return new myPromise ((reslove , reject)=> {
            if(this.state === 'fulfilled') {
                onResolved();
            }
            if(this.state === 'rejected') {
                onRejected();
            }
        });
    }
}

此时问题来了， then 返回的reslove , reject何时执行，故应该有一个方法去调用reslove , reject 同时把结果返回

class myPromise {
    constructor(callback) {
        this.state = 'pending'; // 默认状态
        this.result = undefined; // 结果存储
        const reslove = (value)=> {
            if(!this.state === 'pending') return;
            this.result = value;
            this.state = 'fulfilled';
        };
        const reject = (error)=> {
            if(!this.state === 'pending') return;
            this.result = error;
            this.state = 'rejected';
        };
        try {
            callback(reslove, reject);
        } catch (error) {
            reject(error);
        }
    }
    then(onResolved, onRejected) {
        return new myPromise ((resolve , reject)=> {
            const handleCallback = (func)=> {
               try {
                let res = func(this.result);
                if(res instanceof Promise) {
                    res.then(val => resolve(val), err => reject(err));
                } else {
                    resolve(res);
                }
               } catch (error) {
                reject(error)
               }
            }
            if(this.state === 'fulfilled') {
                handleCallback(onResolved);
            }
            if(this.state === 'rejected') {
                onRejected(onResolved);
            }
        });
    }
}

// 此时如果调用执行时，会立即执行， this.state的状态应该是pending， 应该让它一直调用 直到状态改变后返回

class myPromise {
    constructor(callback) {
        this.state = 'pending'; // 默认状态
        this.result = undefined; // 结果存储
        this.callbackList = [];  // 事件列表
        const reslove = (value)=> {
            if(!this.state === 'pending') return;
            this.result = value;
            this.state = 'fulfilled';

            // 异步执行所有回调函数
            this.callbackList.forEach(cb => cb.onResolved(value));
        };
        const reject = (error)=> {
            if(!this.state === 'pending') return;
            this.result = error;
            this.state = 'rejected';
            // 异步执行所有回调函数
            this.callbackList.forEach(cb => cb.onRejected(value));
        };
        try {
            callback(reslove, reject);
        } catch (error) {
            reject(error);
        }
    }
    
    then(onResolved, onRejected) {
        return new myPromise ((resolve , reject)=> {
            const handleCallback = (func)=> {
               try {
                let res = func(this.result);
                if(res instanceof Promise) {
                    res.then(val => resolve(val), err => reject(err));
                } else {
                    resolve(res);
                }
               } catch (error) {
                reject(error)
               }
            }
            if(this.state === 'fulfilled') {
                handleCallback(onResolved);
            }
            if(this.state === 'rejected') {
                onRejected(onResolved);
            }

            if(this.state === 'pending') {
                // 新增
                this.callbackList.push({
                    onResolved: () => {
                        handleCallback(onResolved)
                    },
                    onRejected: () => {
                        handleCallback(onRejected)
                    }
                })
            }
        });
    }
}

// 调用模块
const test = new myPromise((resolve, reject)=> {
    setTimeout(()=> {
        resolve('请求成功')
    }, 200)
}).then((value)=> {
    console.log(value, '7777')
})