Promise从入门到精通（第3章 自定义(手写)Promise）

最新推荐文章于 2023-03-09 22:55:59 发布
最新推荐文章于 2023-03-09 22:55:59 发布
阅读量230 收藏 1
点赞数
分类专栏： # Promise 文章标签： javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjhxydream/article/details/126020498
版权

Promise从入门到精通（第3章 手写Promise）

第3章 自定义(手写)Promise

3.1 搭建Promise初始结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封装-初始结构搭建</title>
    <!--  引入promise.js以覆盖原有的Promise -->
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject)=>{
            resolve("ok")
        });

        p.then(value=>{
            console.log(value);
        },reason=>{
            console.log(reason);
        });
    </script>
</body>
</html>

function Promise(executor){
    
}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

3.2 resolve和reject结构搭建

function Promise(executor){

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data){
        
    }
    function reject(data){
        
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    executor();
}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

3.3 resolve和reject代码实现

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    executor(resolve, reject);
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {

}

3.4 throw抛出异常改变状态

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
    
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {

}

3.5 Promise对象状态只能修改一次

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    } 
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {

}

3.6 then方法执行回调

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
    
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // 因为then方法是Promise的实例对象p调用的，因此这里的this就是对象p，可通过this.PromiseState获取对象的状态
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
}

3.7 异步任务的回调执行

这种保存回调的方式有缺陷，不适合链式调用then方法

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 保存then中的回调函数
    this.callback = {};

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后查看回调，并执行成功的回调函数
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后查看回调，并执行失败的回调函数
        if(self.callback.onRejected){
            self.callback.onRejected(data);
        }
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
    
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // 因为then方法是Promise的实例对象p调用的，因此这里的this就是对象p，可通过this.PromiseState获取对象的状态
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }

    // 如果Promise中有异步任务，那么需要将then中的回调函数保存，等待异步任务结束后，改变完Promise的状态后再执行then中的回调函数
    if(this.PromiseState === 'pending'){
        this.callback = {
            onResolved:onResolved,
            onRejected:onRejected
        }
    }
}

3.8 指定多个回调函数的实现

image-20220727105351006

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element=>{
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // 因为then方法是Promise的实例对象p调用的，因此这里的this就是对象p，可通过this.PromiseState获取对象的状态
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
    // 如果Promise中有异步任务，那么需要将then中的回调函数保存，
    // 等待异步任务结束后，改变完Promise的状态后再执行then中的回调函数
    if(this.PromiseState === 'pending'){
        this.callbacks.push({
            onResolved:onResolved,
            onRejected:onRejected
        })
    }
}

3.9 同步修改状态then方法的结果返回

在这里插入图片描述

3.10 异步修改状态then方法的结果返回

因为Promise中包含的任务是异步的，因此当p调用then方法时，Promise的状态还未改变，仍是初始状态pending，所以在then方法内部会满足第三个判断的条件this.PromiseState === ‘pending’，在这个判断内部是将then的回调函数加入callbacks中，待Promise的状态改变后执行相应的成功或失败的回调方法，

如果同步任务成功了，那么会执行then中的onResolved方法，这个方法的结果由其回调函数的结果决定，如果回调函数返回一个Promise，那么这个Promise的结果决定了onResolved方法的结果，如果回调函数返回其他值，如字符串，undefined，那么就返回resolve
在这里插入图片描述

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element => {
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
        if (this.PromiseState === 'fulfilled') {
            try {
                let res = onResolved(this.PromiseResult);
                if (res instanceof Promise) {
                    console.log("走这了")
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }
        if (this.PromiseState === 'rejected') {
            onRejected(this.PromiseResult);
        }
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onResolved: function () {
                    try {
                        let res = onResolved(self.PromiseResult);
                        if (res instanceof Promise) {
                            res.then(v => {
                                resolve(v)
                            }, r => {
                                reject(r)
                            });
                        } else {
                            resolve(res)
                        }
                    } catch (error) {
                        reject(error)
                    }
                },
                onRejected: function () {
                    try {
                        let res = onRejected(self.PromiseResult);
                        if (res instanceof Promise) {
                            res.then(v => {
                                resolve(v)
                            }, r => {
                                reject(r)
                            });
                        } else {
                            resolve(res)
                        }
                    } catch (error) {
                        reject(error)
                    }

                }
            })
        }
    });

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封装-初始结构搭建</title>
    <!--  引入promise.js以覆盖原有得Promise -->
    <script src="./promise.js"></script>
</head>
<body>
    <script>
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("ok");
            }, 1000)
        });
        console.log('p:',p)

        const result = p.then(value=>{
            // return new Promise((resolve, reject)=>{
            //     resolve("ok");
            // })
            // console.log(value);
            throw "err";
        },reason=>{
            console.log(reason);
        });
        console.log(result);
        // p.then(value=>{
        //     console.log(value);
        // },reason=>{
        //     console.log(reason);
        // });
    </script>
</body>
</html>

3.12 then方法的完善与优化

在这里插入图片描述

优化后完整版：

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element => {
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
	   // 封装函数
        function callBack(type) {
            try {
                let res = type(self.PromiseResult);
                if (res instanceof Promise) {
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }

        if (this.PromiseState === 'fulfilled') {
            callBack(onResolved);
        }
        if (this.PromiseState === 'rejected') {
            callBack(onRejected);
        }
        // 判断pending函数
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onResolved: function () {
                    callBack(onResolved);
                },
                onRejected: function () {
                    callBack(onRejected);
                }
            })
        }
    });

}

3.13 catch方法异常穿透和值传递

在这里插入图片描述

在这里插入图片描述

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element => {
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    // 判断是否传入回调函数的参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }
    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }
    return new Promise((resolve, reject) => {

        function callBack(type) {
            try {
                let res = type(self.PromiseResult);
                if (res instanceof Promise) {
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }

        if (this.PromiseState === 'fulfilled') {
            callBack(onResolved);
        }
        if (this.PromiseState === 'rejected') {
            callBack(onRejected);
        }
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onResolved: function () {
                    callBack(onResolved);
                },
                onRejected: function () {
                    callBack(onRejected);
                }
            })
        }
    });
}
// 添加catch方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

3.14 Promise中方法的封装(resolve, reject, race, all)

3.14.1 Promise.resolve方法的封装

// 添加Promise.resolve方法
Promise.resolve = function(value){
    // 返回Promise对象
    return new Promise((resolve, reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
                resolve(value);
            },r=>{
                reject(value);
            })
        }else{
            resolve(value);
        }
    });
}

3.14.2 Promise.reject方法的封装

// 添加Promise.reject方法
Promise.reject = function(reason){
    // 返回一个新的Promise对象
    return new Promise((resolve, reject)=>{
        reject(reason);
    });
}

3.14.3 Promise.all方法的封装

// 添加Promise.all方法
Promise.all = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        // 记录成功的Promise个数
        let count = 0;
        // 保存每个成功的结果
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, r => {
                reject(r)
            });
        }
    });
}

3.14.4 Promise.race方法的封装

// 添加Promise.race方法
Promise.race = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            // 谁跑得快，谁改变状态
            promises[i].then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
            // 改变状态后，后面进来的都没必要执行了，直接break
            break;
        }
    });
}

3.14.5 then方法的异步执行

在这里插入图片描述

在这里插入图片描述

3.15 Promise完整实现

// 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        setTimeout(() => {
            self.callbacks.forEach(element => {
                element.onResolved(data)
            });
        });

    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        setTimeout(() => {
            self.callbacks.forEach(element => {
                element.onRejected(data)
            });
        });

    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    // 判断是否传入回调函数的参数
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }
    return new Promise((resolve, reject) => {

        function callBack(type) {
            try {
                let res = type(self.PromiseResult);
                if (res instanceof Promise) {
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }

        if (this.PromiseState === 'fulfilled') {
            setTimeout(() => {
                callBack(onResolved);
            })
        }
        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callBack(onRejected);
            })
        }
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onResolved: function () {
                    callBack(onResolved);
                },
                onRejected: function () {
                    callBack(onRejected);
                }
            })
        }
    });

}

// 添加catch方法
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

// 添加Promise.resolve方法
Promise.resolve = function (value) {
    // 返回Promise对象
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(value);
            }, r => {
                reject(value);
            })
        } else {
            resolve(value);
        }
    });
}

// 添加Promise.reject方法
Promise.reject = function (reason) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

// 添加Promise.all方法
Promise.all = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        // 记录成功的Promise个数
        let count = 0;
        // 保存每个成功的结果
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, r => {
                reject(r)
            });
        }
    });
}
// 添加Promise.race方法
Promise.race = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            // 谁跑得快，谁改变状态
            promises[i].then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
            // 改变状态后，后面进来的都没必要执行了，直接break
            break;
        }
    });
}

3.16 class版本实现

class Promise {
    // 构造方法
    constructor(executor) {
        // 添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        // 保存实例对象中的this值
        const self = this;
        // 保存then中的回调函数
        this.callbacks = [];

        // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
        function resolve(data) {
            // 如果对象状态不为pending，那就直接返回，不执行下面的代码
            if (self.PromiseState !== 'pending') return;
            // 1.修改对象的状态（PromiseState）
            self.PromiseState = 'fulfilled';
            // 2.设置对象的结果值（PromiseResult）
            self.PromiseResult = data;

            // 异步任务结束后逐个执行所有成功的回调函数
            setTimeout(() => {
                self.callbacks.forEach(element => {
                    element.onResolved(data)
                });
            });
        };

        function reject(data) {
            // 如果对象状态不为pending，那就直接返回，不执行下面的代码
            if (self.PromiseState !== 'pending') return;
            // 1.修改对象的状态（PromiseState）
            self.PromiseState = 'rejected';
            // 2.设置对象的结果值（PromiseResult）
            self.PromiseResult = data;

            // 异步任务结束后逐个执行失败的回调函数
            setTimeout(() => {
                self.callbacks.forEach(element => {
                    element.onRejected(data)
                });
            });

        }
        // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }
    // then方法的封装
    then(onResolved, onRejected) {
        const self = this;
        // 判断是否传入回调函数的参数
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason;
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => value;
        }
        return new Promise((resolve, reject) => {

            function callBack(type) {
                try {
                    let res = type(self.PromiseResult);
                    if (res instanceof Promise) {
                        res.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        })
                    } else {
                        resolve(res)
                    }
                } catch (e) {
                    reject(e)
                }
            }

            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    callBack(onResolved);
                })
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callBack(onRejected);
                })
            }
            if (this.PromiseState === 'pending') {
                this.callbacks.push({
                    onResolved: function () {
                        callBack(onResolved);
                    },
                    onRejected: function () {
                        callBack(onRejected);
                    }
                })
            }
        });
    }
    // catch方法的封装
    catch(onRejected) {
        return this.then(undefined, onRejected);
    }
    // static 表明此方法是属于类的，而不是属于实例对象的
    // 添加Promise.resolve方法
    static resolve = function (value) {
        // 返回Promise对象
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(value);
                }, r => {
                    reject(value);
                })
            } else {
                resolve(value);
            }
        });
    }

    // 添加Promise.reject方法
    static reject = function (reason) {
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {
            reject(reason);
        });
    }

    // 添加Promise.all方法
    static all = function (promises) {
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {
            // 记录成功的Promise个数
            let count = 0;
            // 保存每个成功的结果
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    count++;
                    arr[i] = v;
                    if (count === promises.length) {
                        resolve(arr);
                    }
                }, r => {
                    reject(r)
                });
            }
        });
    }
    // 添加Promise.race方法
    static race = function (promises) {
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                // 谁跑得快，谁改变状态
                promises[i].then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                });
                // 改变状态后，后面进来的都没必要执行了，直接break
                break;
            }
        });
    }
}
若水cjj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何自定义Promise函数与详细讲解
weixin_59970020的博客
10-28 384
改变Promise的状态有 三种方式// 声明成功时回调的resolve函数//判断Promise的状态是否已经被修改 ，被修改就不能再次修改了 保证Promise的状态只能修改一次//1.修改Promise对象的状态(promiseState)//成功：resolved、fulfilled//2.设置Promise对象结果值(promiseResult)//声明失败时回调的reject函数。
Promise 自定义
好好学习天天向上
05-16 339
文章目录Promise自定义Promise.all()/Promise.race()的实现 ★ 面试常考Promise.all()Promise.race() Promise自定义 1.promise的执行结果通过.then获取 Promise.all()/Promise.race()的实现 ★ 面试常考 Promise.all() 参数是数组 数组中如果为值，说明该值为成功的value 返回一个promise，只要一个失败了立即返回失败的promise 如果都成功时，值为一个成功值组成的数组 如
Promise的使用
qq_39792789的博客
11-19 265
Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
自定义promise
acm_cn1234567890的博客
10-04 383
一步步实现一个Promise 平常用promise的时候, 是通过new关键字来new Promise(), 用构造函数或者class class MPromise { constructor() { } } 定义promise三种状态类型 const PENDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' 设置初始状态 class MPromise { const
Vue+Axios+ElementUI 远程搜索问题（返回promise对象问题）
qq_30834461的博客
01-03 816
Vue+Axios+ElementUI 远程搜索问题（返回promise对象问题）
ES6 从入门到精通 第二部分
08-22
Promise有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已失败）。例如： ```javascript let promise = new Promise((resolve, reject) => { // 异步操作完成后调用resolve或reject }); promise...
Promise从入门到自定义到企业级面试题
06-16
1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列本视频教程，从最基本的回调/异常语法开始，到Promise的基本使用；从...
JavaScript从入门到精通（第2版）PPT.7z
07-14
在“JavaScript从入门到精通（第2版）PPT”这套教学资料中，我们将深入探讨JavaScript的核心概念、语法特性以及实际应用。 1. **基础概念** - **变量与数据类型**：JavaScript支持基本数据类型（如字符串、数字、...
JS手写一个自定义Promise操作示例
10-15
在面试中，经常会被要求手写一个简单的Promise实现来理解其工作原理。以下是一个基于class的自定义Promise（命名为MyPromise）的详细解释。 首先，`MyPromise`构造函数接收一个执行器函数`executor`作为参数。这个...
JavaScript从入门到精通（第2版）书籍和源代码实例
12-04
本书《JavaScript从入门到精通（第2版）》旨在帮助初学者和有经验的开发者深入理解和掌握这门语言，从而提升技能水平。通过阅读本书和实践其中的源代码实例，读者将能够全面了解JavaScript的核心概念和技术。 首先...
ES6引入了Promise对象解决异步问题
F_mengze的博客
05-04 579
什么是Promise Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。 优点 (1) promise对象，进行链式回调，可以将 异步操作 以 同步操作的流程 表达出来，避免层层嵌套，避免"厄运回调金字塔"。 (2) 可以有多个then()连缀书写。 (3) 不仅给出了异步操作成功的代码解决方案，还给出了异步操作失败和完成的解决方案。 new Promise(fun...
Promise深入 + 自定义Promise
最新发布
capAmerica的博客
03-09 118
/
获取[[PromiseResult]]中的数据
NanChen的博客
12-11 2678
var router= this.$router.push('/choose?keyword='+this.value).then(res=>{ console.log(res.query); }) console.log(router);
5.13 Async 和 Await 与promise基础
毛毛的博客
05-13 214
Async 和 Await 针对异步编程，我们学习过Ajax的回调形式，promise的链式调用形式 ajax回调模式 // 回调形式调用 $.ajax({ url, data, success:function(result){ $.ajax({ data:result, success: function(result1){ $.ajax({ u
关于Element-ui表单验证的坑
于离别之朝束起约定之花的博客
10-21 1068
首先，根据官网示例，大家都知道element的表单验证是这样的： 1、这是HTML部分， <el-form :model="ruleForm" :rules="rules" ref="ruleForm"></el-form> 2、这是js部分,其中包含了规则和表单提交 <script> export default { data() { ...
自定义promise的实现
weixin_34249678的博客
02-16 229
/* Promise */ function Promise() { this.queues = []; this.fails = []; this.progress = []; this.nextVal = null; this.nextErr = null; } Promise.prototype.then = function ( onFulfil...
自定义Promise
weixin_42349568的博客
10-06 589
一，整体结构 采用es5的语法来写： //es5里面自定义模块，用的是IIFE(函数自调用) (function(window){ //定义promise构造函数 //参数是excutor函数：同步执行 function Promise(excutor){ } // Promise原型对象的then方法,两个参数是回调函数（成功和失败），返回一个新的promise对象 Promise.prototype.then=function (onResolved,onRejected){
Promise--初体验
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-20 269
then()方法的作用是Promise实例添加解决（fulfillment）和拒绝（rejection）状态的回调函数。then()方法会返回一个新的Promise实例，所以then()方法后面可以继续跟另一个then()方法进行链式调用。then()方法有2个参数，这2个参数都接收函数参数，第一个参数是解决（fulfillment）状态的回调函数，另外一个参数是拒绝（rejection）状态的回调函数。
由浅入深，从掌握Promise的基本使用到手写Promise.doc
07-11
在手写 Promise 的过程中，我们需要实现 Promise 的基本功能，包括 then() 方法、resolve() 方法和 reject() 方法。然后通过实现 Promise 的链式调用和异步操作来进一步完善手写的 Promise。 掌握了 Promise 的基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值