手写Promise（全面）

已于 2022-03-01 23:47:30 修改
阅读量928 收藏 3
点赞数 6
分类专栏： Promise 文章标签： 前端 javascript
于 2022-02-25 17:25:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55269092/article/details/123137689
版权

手写Promise（包含测试用例）

（1）测试用例

<!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>
    <!-- 构造函数 -->
    <!-- <script src="./Promise.js"></script> -->
    <!-- 类 -->
    <!-- <script src="./Promise类.js"></script> -->
</head>

<body>
    <script>
        // 测试then方法
        // 创建Promise实例对象
        // let p = new Promise((resolve, reject) => {
        //     // setTimeout(() => {
        //     resolve('hahaaa');
        //     // }, 200);
        // });
        // console.log(p)
        // const result =  p.then(value => {
        //     return new Promise((resolve,reject)=>{
        //         resolve('hahayang');
        //     })
        // }, reason => {
        //     console.warn(reason); 
        //     // return new Promise((resolve,reject)=>{
        //     //     reject('haha')
        //     // })
        //     // return 'ok';
        //     throw 'error';
        // });
        // console.log(27,result)

        // 测试catch方法
        // let p = new Promise((resolve,reject)=>{
        //     throw '我戳了';
        // })
        // p.catch(reason => {
        //     console.warn(reason);
        // })

        // 测试catch方法（异常穿透）
        // let p = new Promise((resolve,reject)=>{
        //     throw '我戳了';
        // })
        // p.then()
        // .then(value=>{
        //     console.log(222)
        // }).then(value=>{
        //     console.log(333);
        // }).catch(reason=>{
        //     console.warn(reason,444);
        // })

        // 测试resolve方法
        // const p2 = Promise.resolve('ok')
        // console.log(p2)

        // 测试reject方法
        // const p3_1 = Promise.reject('haha')
        // const p3_2 = Promise.reject(Promise.resolve('我是一个粉刷匠'));
        // console.log(p3_1);
        // console.log(p3_2)

        // 测试all方法
        // const p4_1 = Promise.resolve('ok');
        // const p4_2 = new Promise((resolve,reject)=>{
        //     setTimeout(() => {
        //         resolve('success');
        //     }, 1000);
        // })
        // const p4_3 = new Promise((resolve,reject)=>{
        //     setTimeout(() => {
        //         resolve('我是一个粉刷匠');
        //     }, 500);
        // })
        // const p4 = Promise.all([p4_1,p4_2,p4_3]);
        // console.log(p4);

        // 测试race方法
        // const p5_1 = Promise.resolve('ok');
        // const p5_2 = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         resolve('success');
        //     }, 1000);
        // })
        // const p5_3 = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         resolve('我是一个粉刷匠');
        //     }, 500);
        // })
        // const p5 = Promise.race([p5_1, p5_2, p5_3]);
        // console.log(p5);

        // then方法回调异步调用
        // let p = new Promise((resolve,reject)=>{
        //     console.log(111)
        //     resolve('ok')
        // })
        // p.then(value=>{
        //     console.log(222)
        // })
        // console.log(333)
        // 111 333 222(先执行同步代码，后执行异步代码)
    </script>
</body>

</html>

（2）构造函数方法

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];
    const self = this;
    // 定义resolve方法
    function resolve(data) {
        // 判断状态
        if (self.PromiseState !== 'pending') return;
        // 修改属性值
        self.PromiseState = 'fulfilled';
        self.PromiseResult = data;
        // 调用then方法
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            });
        });

    }
    // 定义reject方法
    function reject(reason) {
        if (self.PromiseState !== 'pending') return;
        self.PromiseState = 'rejected';
        self.PromiseResult = reason;
        // 调用then方法
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(reason);
            })
        });
    }
    // 同步调用执行器函数
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}
// 将then方法绑定在Promise原型链上，所有的Promise实例对象都可以调用then方法
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // this指向调用zhen方法的实例对象（p）
    const self = this;
    // 如果没有传入onRejected函数，则自定义一个，catch穿透
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason
        };
    }
    // 如果没有传入onResolved函数，则自定义一个
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }
    return new Promise((resolve, reject) => {
        // 封装函数
        function callback(type) {
            try {
                // 获取回调函数的执行结果
                let result = type(self.PromiseResult);
                // 判断回调函数是否是一个Promise对象实例，
                if (result instanceof Promise) {
                    result.then(value => {
                        resolve(value)
                    }, reason => {
                        reject(reason)
                    })
                } else {
                    // 结果的对象状态为成功
                    resolve(result);
                }
            } catch (error) {
                reject(error)
            }
        }
        // 调用回调函数
        // 成功的回调
        if (this.PromiseState === 'fulfilled') {
            setTimeout(() => {
                callback(onResolved);
            });
        }
        // 失败的回调
        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onRejected)
            });
        }
        // 判断pending状态
        if (this.PromiseState === 'pending') {
            // 可能存在一个或多个p.then。
            // 所以将then方法的回调函数存在一个数组中，等reject或resolve方法去调用这些回调函数
            this.callbacks.push({
                onResolved: function () {
                    callback(onResolved);
                },
                onRejected: function () {
                    callback(onRejected);
                }
            })
        }
    })
}
// 添加catch方法
Promise.prototype.catch = function (onRejected) {
    this.then(undefined, onRejected);
}
// 添加resolve方法
Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(value => {
                resolve(value)
            }, reason => {
                reject(reason)
            })
        } else {
            resolve(value)
        }
    })
}

// 添加reject方法
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    })
}

// 添加all方法（如果全是fulfilled则返回一个数组，数组中存放着PromiseResult。
//             如果存在一个或多个rejected，则返回最早的{异步}）
Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(value => {
                count++;
                arr[i] = value;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, reason => {
                reject(reason)
            })
        }
    })
}

// 添加race方法，谁先完成返回谁
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(value => {
                resolve(value)
            }, reason => {
                reject(reason)
            })
        }
    })
}

（3）类方法

class Promise {
    // 构造函数
    constructor(executor) {
        // 添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        this.callbacks = [];
        const self = this;
        // 定义resolve方法
        function resolve(data) {
            // 判断状态
            if (self.PromiseState !== 'pending') return;
            // 修改属性值
            self.PromiseState = 'fulfilled';
            self.PromiseResult = data;
            // 调用then方法
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data);
                });
            });

        }
        // 定义reject方法
        function reject(reason) {
            if (self.PromiseState !== 'pending') return;
            self.PromiseState = 'rejected';
            self.PromiseResult = reason;
            // 调用then方法
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected(reason);
                })
            });
        }
        // 同步调用执行器函数
        try {
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }
    // 添加then方法
    then(onResolved, onRejected) {
        // this指向调用zhen方法的实例对象（p）
        const self = this;
        // 如果没有传入onRejected函数，则自定义一个，catch穿透
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason
            };
        }
        // 如果没有传入onResolved函数，则自定义一个
        if (typeof onResolved !== 'function') {
            onResolved = value => value;
        }
        return new Promise((resolve, reject) => {
            // 封装函数
            function callback(type) {
                try {
                    // 获取回调函数的执行结果
                    let result = type(self.PromiseResult);
                    // 判断回调函数是否是一个Promise对象实例，
                    if (result instanceof Promise) {
                        result.then(value => {
                            resolve(value)
                        }, reason => {
                            reject(reason)
                        })
                    } else {
                        // 结果的对象状态为成功
                        resolve(result);
                    }
                } catch (error) {
                    reject(error)
                }
            }
            // 调用回调函数
            // 成功的回调
            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    callback(onResolved);
                });
            }
            // 失败的回调
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected)
                });
            }
            // 判断pending状态
            if (this.PromiseState === 'pending') {
                // 可能存在一个或多个p.then。
                // 所以将then方法的回调函数存在一个数组中，等reject或resolve方法去调用这些回调函数
                this.callbacks.push({
                    onResolved: function () {
                        callback(onResolved);
                    },
                    onRejected: function () {
                        callback(onRejected);
                    }
                })
            }
        })
    }
    // 添加catch方法
    catch (onRejected) {
        this.then(undefined, onRejected);
    }
    // 添加resolve方法
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(value => {
                    resolve(value)
                }, reason => {
                    reject(reason)
                })
            } else {
                resolve(value)
            }
        })
    }
    // 添加reject方法
    static reject(reason) {
        return new Promise((resolve, reject) => {
            reject(reason);
        })
    }
    // 添加all方法（如果全是fulfilled则返回一个数组，数组中存放着PromiseResult。
    //             如果存在一个或多个rejected，则返回最早的{异步}）
    static all(promises) {
        return new Promise((resolve, reject) => {
            let count = 0;
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(value => {
                    count++;
                    arr[i] = value;
                    if (count === promises.length) {
                        resolve(arr);
                    }
                }, reason => {
                    reject(reason)
                })
            }
        })
    }
    // 添加race方法，谁先完成返回谁
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(value => {
                    resolve(value)
                }, reason => {
                    reject(reason)
                })
            }
        })
    }
}

man杨杨
关注
专栏目录
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
Allen-
07-10 3157
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
教你如何手写一个Promise
ose_huang的博客
02-25 9635
promise的进阶，手写一个自己的promise
【手写Promise】
热门推荐
weixin_49487698的博客
05-16 1万+
一、JS的错误 1、错误的类型 2、错误处理 3、错误对象 <!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
超详细！全面搞懂手写Promise其过程
最新发布
书呆子ITme
08-13 1305
Promise是JavaScript中用于处理异步操作的一种方式。它提供了一种简洁且强大的方法来处理异步代码，避免了方法回调。本文将详细讲解如何从零开始手写一个Promise，帮助您深入理解其工作原理。PromisePending（待定）：初始状态，既不是成功也不是失败。Fulfilled（已兑现）：操作成功完成。Rejected（已拒绝）：操作失败。通过手写Promise，我们深入了解了其内部工作原理。希望这篇技术文档对您理解Promise有所帮助。如果在实践中遇到问题，建议参考ES6标准中的。
手写Promise
XunLin233的博客
05-30 1970
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
今天教你手写 Promise （一）
小北哥哥和北妈
03-22 255
大家好，我是梦起今天我们来聊聊常见的前端手写功能之Promise首先我们来聊聊要实现的功能：1、Promise就是一个类，在执行类的时候，需要传递一个执行器(函数)进去，执行器会立刻执行2、Promise有三种状态，分别为 等待pending成功fulfilled失败rejectedpending=>fulfilled||pending=>...
js-Promise：手写系列手写promise，vue ..
02-21
本文将深入探讨 Promise 的原理，并尝试手写一个简单的 Promise 实现，同时结合 Vue.js 的异步处理，帮助你更全面地理解这一重要概念。 ### 1. Promise 的基本概念 Promise 代表了一个异步操作的最终完成或失败，...
手写Promise(保姆级教程)
小陈的博客
12-01 150
今天我们更深入地讲述了类型转换的诸多细节，除了这一讲的简单题解之外，对于“+”号运算也做了一些补充。总地来讲，我们是在讨论 JavaScript 语言所谓“动态类型”的部分，但是动态类型并不仅限于此。也就是说 JavaScript 中并不仅仅是“类型转换”表现出来动态类型的特性。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
手写promise。all
09-02
这就是一个简单的手写Promise.all函数的实现。请注意，这只是一个基本实现，并没有处理一些高级功能，如超时控制、错误处理等。如果你需要更完整和健壮的实现，请考虑使用第三方库或参考更全面的文档和示例。
彻底搞懂Promise
m0_46622443的博客
05-18 328
Promise.resolve 和 new Promise((r, j) => r()) 到底有什么区别呢？
手写promise
GuoZebin的博客
05-31 396
前几天在看知乎的时候，无意间发现了一道面试题，手写promise，因为没研究过promise的实现，所以对这个问题也是一脸懵逼，忍不住就研究了一下。 try { module.exports = Promise } catch (e) {} function Promise(executor) { var self = this self.status = 'pendi...
手写一个promise
weixin_40821790的博客
07-24 663
class Qromise { constructor(fn) { this.status = 'pending' this.error = '' this.data = '' try{ fn(this.onFullfilled.bind(this), this.onRejected.bind(th...
手写实现Promise
tian_liang_jia的博客
07-01 537
关于promise的实现
手写一个自己的Promise
qq_38011050的博客
09-18 651
常言道：“知其然，更要知其所以然” 所谓JS本身是“函数式，异步”编程（回调地狱，你懂的），Promise得出现，让JS写起来好像是“同步编程”得感觉了！ 下面是基于我自己对Promise得理解，用ES6语法写了一个Promise // 既然Promise使用得时候是通过new得到的，那么首先分析出Promise是一个类 class Promise2 { // Promise接收一个回调函...
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值