自定义手写Promise

简介: 手写函数版和类版Promise

函数版:
function diyPromise(executor) {

//添加属性
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
//保存实例对象 this的值为diyPromise
const self = this;
//reslove函数
function resolve(data) {
    //设置promise对象状态只能由pending到其他状态且只修改一次
    if (self.PromiseState !== 'pending') return;
    //修改对象的状态
    self.PromiseState = 'resolved';
    //修改对象结果值
    self.PromiseResult = data
        //调用成功的回调函数
    setTimeout(() => {
        self.callbacks.forEach(item => {
            item.onResolved(data)
        })
    })

}
//reject函数
function reject(data) {
    //设置promise对象状态只能由pending到其他状态且只修改一次
    if (self.PromiseState !== 'pending') return;
    //修改对象的状态
    self.PromiseState = 'rejected';
    //修改对象结果值
    self.PromiseResult = data
        //调用失败的回调函数
    setTimeout(() => {
        self.callbacks.forEach(item => {
            item.onRejected(data)
        })
    })

}

//同步调用 [执行器函数]
try {
    executor(resolve, reject);
} catch (error) {
    reject(error);
}
AI 代码解读

}

//添加then方法回调
diyPromise.prototype.then = function(onResolved, onRejected) {
//判断回调函数参数
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason;
}
}
if (typeof onResolved !== 'function') {
onResolved = value => value;
// value = {return value}
}
//保存实例对象的值
const self = this;
return new diyPromise((resolve, reject) => {
//封装函数
function callback(type) {
try {
//获取回调函数的执行结果
let result = type(self.PromiseResult);
//判断 获取的执行结果是否是Promise实例
if (result instanceof diyPromise) {
//如果是Promise类型的对象
result.then(v => {
resolve(v)
}, r => {
reject(r);
})
} else {
//如果是非Promise对象 更改Promise状态为成功
resolve(result);
}
} catch (error) {
reject(error)
}
}
//调用回调函数
if (this.PromiseState === 'resolved') {
setTimeout(() => {
callback(onResolved)
})
}

        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onRejected);
            })
        }
        //判断 pending状态
        if (this.PromiseState === 'pending') {
            //保存回调函数
            this.callbacks.push({
                onRejected: function() {
                    callback(onResolved)
                },

                onResolved: function() {
                    callback(onRejected)
                }
            })
        }
    })
}
//添加catch方法
AI 代码解读

diyPromise.prototype.catch = function(onRejected) {
return this.then(undefined, onRejected);
}

//添加resolve方法
diyPromise.resolve = function(value) {
//返回Promise对象
return new diyPromise((resolve, reject) => {
if (value instanceof diyPromise) {
value.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
//状态设置为成功
resolve(value);
}
})
}
//添加reject方法
diyPromise.reject = function(reason) {
return new diyPromise((resolve, reject) => {
reject(reason);
})
}
//添加all方法
diyPromise.all = function(promises) {
//返回结果为promise对象
return new diyPromise((resolve, reject) => {
//声明变量
let count = 0;
let arr = [];
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
//得知对象的状态是成功
//每个promise对象都成功
count++;
//将当前promise对象成功的结果存入到 集合中
arr[i] = v;
//判断 是否所有的promise都成功了
if (count === promises.length) {
//修改状态
resolve(arr);
}
}, r => {
reject(r);
});
}
})
}
//添加rece方法
diyPromise.race = function(promises) {
return new diyPromise((resolve, reject) => {
// // for (let i = 0; i < promises.length; i++) {
// promises[i].then(v => {
// //修改返回对象状态为 [成功]
// resolve(v);
// }, r => {
// //修改返回对象状态为 [失败]
// reject(r);
// })

    // }
    for (let key of promises) {
        key.then(v => {
            //修改返回对象状态为 [成功]
            resolve(v);
        }, r => {
            //修改返回对象状态为 [失败]
            reject(r);
        })
    }
})
AI 代码解读

}

类版:
class diyPromise {
constructor(executor) {
//添加属性
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
//保存实例对象 this的值为diyPromise
const self = this;
//reslove函数
function resolve(data) {
//设置promise对象状态只能由pending到其他状态且只修改一次
if (self.PromiseState !== 'pending') return;
//修改对象的状态
self.PromiseState = 'resolved';
//修改对象结果值
self.PromiseResult = data
//调用成功的回调函数
setTimeout(() => {
self.callbacks.forEach(item => {
item.onResolved(data)
})
})

    }
    //reject函数
    function reject(data) {
        //设置promise对象状态只能由pending到其他状态且只修改一次
        if (self.PromiseState !== 'pending') return;
        //修改对象的状态
        self.PromiseState = 'rejected';
        //修改对象结果值
        self.PromiseResult = data
            //调用失败的回调函数
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(data)
            })
        })

    }

    //同步调用 [执行器函数]
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}
then(onResolved, onRejected) {
    //判断回调函数参数
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
        // value = {return value}
    }
    //保存实例对象的值
    const self = this;
    return new diyPromise((resolve, reject) => {
        //封装函数
        function callback(type) {
            try {
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断 获取的执行结果是否是Promise实例
                if (result instanceof diyPromise) {
                    //如果是Promise类型的对象
                    result.then(v => {
                        resolve(v)
                    }, r => {
                        reject(r);
                    })
                } else {
                    //如果是非Promise对象 更改Promise状态为成功
                    resolve(result);
                }
            } catch (error) {
                reject(error)
            }
        }
        //调用回调函数
        if (this.PromiseState === 'resolved') {
            setTimeout(() => {
                callback(onResolved)
            })
        }

        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onRejected);
            })
        }
        //判断 pending状态
        if (this.PromiseState === 'pending') {
            //保存回调函数
            this.callbacks.push({
                onRejected: function() {
                    callback(onResolved)
                },

                onResolved: function() {
                    callback(onRejected)
                }
            })
        }
    })
}
catch (onRejected) {
    return this.then(undefined, onRejected);
}
static resolve(value) {
        //返回Promise对象
        return new diyPromise((resolve, reject) => {
            if (value instanceof diyPromise) {
                value.then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                })
            } else {
                //状态设置为成功
                resolve(value);
            }
        })
    }
    //添加reject方法
static reject(reason) {
        return new diyPromise((resolve, reject) => {
            reject(reason);
        })
    }
    //添加all方法
static all(promises) {
        //返回结果为promise对象
        return new diyPromise((resolve, reject) => {
            //声明变量
            let count = 0;
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    //得知对象的状态是成功 
                    //每个promise对象都成功
                    count++;
                    //将当前promise对象成功的结果存入到 集合中
                    arr[i] = v;
                    //判断 是否所有的promise都成功了
                    if (count === promises.length) {
                        //修改状态
                        resolve(arr);
                    }
                }, r => {
                    reject(r);
                });
            }
        })
    }
    //添加rece方法
static race(promises) {
    return new diyPromise((resolve, reject) => {
        // // for (let i = 0; i < promises.length; i++) {
        //     promises[i].then(v => {
        //         //修改返回对象状态为 [成功]
        //         resolve(v);
        //     }, r => {
        //         //修改返回对象状态为 [失败]
        //         reject(r);
        //     })

        // }
        for (let key of promises) {
            key.then(v => {
                //修改返回对象状态为 [成功]
                resolve(v);
            }, r => {
                //修改返回对象状态为 [失败]
                reject(r);
            })
        }
    })
}
AI 代码解读

}

目录
打赏
0
0
0
0
14
分享
相关文章
Junit5单元测试框架详解
前面我们学习了Selenium自动化测试框架,但是有的时候测试用例会很多,我们需要一个工具来管理这些测试用例,而Junit就是一个很好的管理工具,简单点来说,Junit就是一个针对Java的单元测试框架;
275 0
IPV6 的路径 MTU 发现
本文档是 Internet 工程任务组 (IETF) 的产品。它代表了 IETF 社区的共识。它已接受公众审查,并已获互联网工程指导小组 (IESG) 批准出版。有关 Internet 标准的更多信息,请参见 RFC 7841 的第 2 节。
738 0
IPV6 的路径 MTU 发现
重磅发布!!!蚂蚁图团队开源高性能原生图存储系统CStore
CStore是一款专门为图分析场景而设计的原生图存储引擎,它采用了Rust语言编写,使用基于图的存储结构,针对图分析场景进行特定优化。CStore可以存储包含千亿级点和万亿级边的图数据,在蚂蚁集团内部的多场景使用中,已经积累了多年的经验,存储容量达到了PB级别。
重磅发布!!!蚂蚁图团队开源高性能原生图存储系统CStore
|
12月前
|
Flutter dio http 封装指南说明
本文介绍了如何实现一个通用、可重构的 Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。
313 2
Flutter dio http 封装指南说明
po+selenium+unittest自动化测试项目实战
po+selenium+unittest自动化测试项目实战
2276 0
 po+selenium+unittest自动化测试项目实战
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
357 0
嵌入式C语言代码的基本编写规范要求
嵌入式C语言代码的基本编写规范要求
268 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问