promise原理

promise的基础语法

目的：promise是书写异步代码的另一种方式，解决回调函数嵌套的问题

        // 1 创建 new 一个
        const p = new Promise((resolve, reject) => {
            // resolve and reject都是promise内部提供的 => 将状态从pending改为fulfilled
            // resolve是成功时调用的函数 reject是失败时调用的函数 => 将状态从pending改为rejected
            // promise内部一般会有异步操作：ajax
            setTimeout(() => {
                resolve(200)
            }, 1000);
        })
        // 2 使用 p,then(onFulfilled,onRejected).catch(fn)
        p.then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        }) 

promise的三个状态

pending：等待（进行中）

fulfilled：成功（已完成）调用了resolve，promise的状态会被标记为成功

rejected：失败（拒绝）调用了reject，promise的状态会被标记为失败

注意：一旦promise的状态发生变化，状态就被凝固

 

手写promise

promise可以new，说明它是一个类，参数是一个数组

初步实现resolve，reject，then

        class Promise {
            constructor(executor) {
                // 状态是实例的属性，每个实例都有自己的状态
                this.state = 'pending';
                this.value = undefined; // 后面给.them使用
                this.reason = undefined; // 后面给.catch使用
                let resolve = (value) => {
                    // 一旦promise的状态发生变化，状态就被凝固，要加个判断
                    if (this.state === 'pending') {
                        this.state = 'fulfilled'; // 将状态改为成功
                        this.value = value; // 记录成功的信息
                    }
                }
                let reject = (reason) => {
                    // 一旦promise的状态发生变化，状态就被凝固，要加个判断
                    if (this.state === 'pending') {
                        this.state = 'rejected'; // 将状态改为失败，
                        this.reason = reason; // 记录失败的信息
                    }
                }
                // 一旦new立即执行，这里要调用
                try {
                    executor(resolve, reject);
                } catch (error) {
                    reject(error);
                }
                
            }
            // 接收2个函数
            then(onFulfilled, onRejected) {
                // onFulfilled 成功时调用
                if (this.state === 'fulfilled') {
                    onFulfilled(this.value);
                }
                // onRejected 失败时调用
                if (this.state === 'rejected') {
                    onRejected(this.reason);
                }
            }
        }

实现异步

调用then的时，有可能是异步的，所以应该等异步执行完，再来执行then里面的函数

思路：先把then里面定义的回调函数用数组存起来，等执行resolve() 再遍历回调函数

         class Promise {
            constructor(executor) {
                // 状态是实例的属性，每个实例都有自己的状态
                this.state = 'pending';
                this.value = undefined; // 后面给.them使用
                this.reason = undefined; // 后面给.catch使用

                this.onFulfilledCallbacks = [];
                this.onRejectedCallbacks = [];

                let resolve = (value) => {
                    // 一旦promise的状态发生变化，状态就被凝固，要加个判断
                    if (this.state === 'pending') {
                        this.state = 'fulfilled'; // 将状态改为成功
                        this.value = value; // 记录成功的信息
                        // 一旦执行resolve，就调用传给then的处理函数
                        this.onFulfilledCallbacks.forEach(fn => fn());
                    }
                }
                let reject = (reason) => {
                    // 一旦promise的状态发生变化，状态就被凝固，要加个判断
                    if (this.state === 'pending') {
                        this.state = 'rejected'; // 将状态改为失败，
                        this.reason = reason; // 记录失败的信息
                        // 一旦执行reject，就调用传给then的处理函数
                        this.onRejectedCallbacks.forEach(fn => fn());
                    }
                }
                // 一旦new立即执行，这里要调用
                try {
                    executor(resolve, reject);
                } catch (error) {
                    reject(error);
                }

            }
            // 接收2个函数
            then(onFulfilled, onRejected) {
                // onFulfilled 成功时调用
                if (this.state === 'fulfilled') {
                    onFulfilled(this.value);
                }
                // onRejected 失败时调用
                if (this.state === 'rejected') {
                    onRejected(this.reason);
                }

                // 当异步的结果还没出来时
                if (this.state === 'pending') {
                    // 将成功时要干的事存起来
                    this.onFulfilledCallbacks.push(() => {
                        // 利用闭包-把value存起来了-将来遍历执行时能使用正确的value
                        onFulfilled(this.value);
                    });
                    // 将失败时要干的事存起来
                    this.onRejectedCallbacks.push(() => {
                        onRejected(this.reason);
                    });
                }
            }
        }

实现链式调用

 思路：then()返回一个promise

       const p = new Promise((resolve, reject) => {
            resolve(500)
        })

        // 上一个.then要返回一个promise
        // 下一个.then的参数要拿到上一个.then的回调返回值
        p.then(res => {
            console.log(res);
            // return 200
            return new Promise((resolve, reject) => {
                resolve(200)
            })
        }).then(data => {
            console.log(data);
        })

 

        function resolvePromise(x, resolve, reject) {
            if (x instanceof Promise) {
                // x是promise,则执行，返回结果
                x.then((value) => {
                    resolve(value)
                }, (err) => {
                    reject(err)
                })
            } else {
                resolve(x)
            }
        }
        class Promise {
            constructor(executor) {
                // 状态是实例的属性，每个实例都有自己的状态
                this.state = 'pending';
                this.value = undefined; // 后面给.them使用
                this.reason = undefined; // 后面给.catch使用

                this.onFulfilledCallbacks = [];
                this.onRejectedCallbacks = [];

                let resolve = (value) => {
                    // 一旦promise的状态发生变化，状态就被凝固，要加个判断
                    if (this.state === 'pending') {
                        this.state = 'fulfilled'; // 将状态改为成功
                        this.value = value; // 记录成功的信息
                        // 一旦执行resolve，就调用传给then的处理函数
                        this.onFulfilledCallbacks.forEach(fn => fn());
                    }
                }
                let reject = (reason) => {
                    // 一旦promise的状态发生变化，状态就被凝固，要加个判断
                    if (this.state === 'pending') {
                        this.state = 'rejected'; // 将状态改为失败，
                        this.reason = reason; // 记录失败的信息
                        // 一旦执行reject，就调用传给then的处理函数
                        this.onRejectedCallbacks.forEach(fn => fn());
                    }
                }
                // 一旦new立即执行，这里要调用
                try {
                    executor(resolve, reject);
                } catch (error) {
                    reject(error);
                }

            }
            // 接收2个函数
            then(onFulfilled, onRejected) {
                // promise2是链式后面的promise
                let promise2 = new Promise((resolve, reject) => {
                    // onFulfilled 成功时调用
                    if (this.state === 'fulfilled') {
                        let x = onFulfilled(this.value);
                        // x是前一个.then的成功回调的返回值
                        // 如果是普通值，调用resolve
                        // 如果是promise对象，看promise是否成功
                        // 将对X进行判断-封装成一个函数
                        resolvePromise(x, resolve, reject)
                    }
                    // onRejected 失败时调用
                    if (this.state === 'rejected') {
                        onRejected(this.reason);
                    }

                    // 当异步的结果还没出来时
                    if (this.state === 'pending') {
                        // 将成功时要干的事存起来
                        this.onFulfilledCallbacks.push(() => {
                            // 利用闭包-把value存起来了-将来遍历执行时能使用正确的value
                            onFulfilled(this.value);
                        });
                        // 将失败时要干的事存起来
                        this.onRejectedCallbacks.push(() => {
                            onRejected(this.reason);
                        });
                    }
                })
                return promise2
            }
        }

 

实现promise.resolve()

       // 得到一个成功的Promise对象
        Promise.resolve = function (value) {
            return new Promise((resolve, reject) => {
                resolve(value)
            })
        }

        Promise.resolve(200).then(res => {
            console.log(res)
        })

 

实现Promise.reject()

        // 得到一个失败的Promise对象
        Promise.reject = function (value) {
            return new Promise((resolve, reject) => {
                reject(value)
            })
        }

        Promise.reject(500).then(res => {
            console.log(res)
        }, err => {
            console.log(err);
        })

 

实现Promise.race()

        // 先满足条件的先被then处理，其他忽略--返回最快的结果
        Promise.race = function (promises) {
            // 遍历promises，先满足条件的先返回resolve---promise状态只能被修改一次，只要修改了，后面再改也无效
            return new Promise((resolve, reject) => {
                promises.forEach(item => {
                    item.then(resolve, reject)
                });
            })
        }


        const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(111);
            }, 1000);
        });
        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(222);
            }, 2000);
        });
        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(333);
            }, 3000);
        });

        Promise.race([p1, p2, p3]).then(res => {
            console.log(res);  // 111
        })

 

实现promise.all

1 首先看promise.all的使用

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
      resolve(111);
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(222);
    }, 2000);
});

Promise.all([p1, p2]).then(res => {
    console.log(res);
})

2 分析-promise.all能使用then， 说明它返回一个promise。接收一个promise数组

function myPromiseAll(list) {
    return new Promise((resolve, reject) => {
        let arr = [];
        let num = 0;
        list.forEach(item => {
            item.then(res => {
                arr.push(res);
                num++;
                if(num === list.length) {
                    resolve(arr);
                }
            })
        });
    })
}
myPromiseAll([p1,p2]).then(res => {
    console.log(res);
})