面试准备之手写Promise

已于 2022-05-26 14:50:36 修改
阅读量2.3k 收藏 20
点赞数 4
分类专栏： 面试准备 学习笔记 手写专题 文章标签： javascript 面试 前端
于 2022-04-30 16:04:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49172439/article/details/124514197
版权

本文是我在看完尚硅谷Promise教程后整理的手写Promsie，内容可能会稍许有点偏差，仅供参考。

当然，都看到手写Promise了，所以肯定对Promise的基本使用是没问题了，下面就来看看如何手写一份Promise吧。

一、搭建Promise骨架

新建lib文件夹，添加Promise.js文件。

首先采用ES5语法实现，后续会讲解ES6语法实现

// 自定义Promise函数模块: IIFE
(function (window) {
    // Promise构造函数
    // executor: 执行器函数（同步执行）
    function Promise(executor) {

    }

    // Promise原型对象的then(),指定成功和失败的回调函数，返回一个新的Promise对象
    Promise.prototype.then = function (onResolved, onRejected) {

    }

    // Promise原型对象的catch()，指定失败的回调函数，返回一个新的promise对象
    Promise.prototype.catch = function (onRejected) {

    }

    // Promise函数对象的resolve方法
    Promise.resolve = function (value) {

    }

    // Promise函数对象的reject方法
    Promise.reject = function (reason) {

    }

    // Promise函数对象的all方法
    Promise.all = function (promises) {

    }

    // Promise函数对象的race方法
    Promise.race = function (promises) {

    }

    // 向外暴露promise函数
    window.Promise = Promise
})(window)

二、完善构造函数

const PENDING = "pending"
const RESOLVED = "resolved"
const REJECTED = "rejected"
// Promise构造函数
// executor: 执行器函数（同步执行）
function Promise(executor) {
    const self = this
    self.status = PENDING
    self.data = undefined
    self.callbacks = []

    function resolve(value) {
        if (self.status !== PENDING) {
            return 
        }
        // 将状态改为resolved
        self.status = RESOLVED
        // 保存value数据
        self.data = value
        // 如果有待执行的callback函数，立即异步执行回调函数onResolved
        if (self.callbacks.length > 0) {
            setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                    callbacksObj.onResolved(value)
                })
            }, 0);
        }
    }

    function reject(reason) {
        if (self.status !== PENDING) {
            return 
        }
        // 将状态改为resolved
        self.status = REJECTED
        // 保存value数据
        self.data = reason
        // 如果有待执行的callback函数，立即异步执行回调函数onRejected
        if (self.callbacks.length > 0) {
            setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                    callbacksObj.onRejected(reason)
                })
            }, 0);
        }
    }

    // 立即同步执行executor
    try {
        executor(resolve, reject)
    } catch (error) {
        reject(error)
    }
}

三、完善then方法

Promise.prototype.then = function (onResolved, onRejected) {
        onResolved = typeof onResolved === 'function' ? onResolved : value => value
        onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}

        const self = this
        return new Promise((resolve, reject) => {
            function handle(callback) {
                try {
                    const result = callback(self.data)
                    if (result  instanceof Promise) {
                        result.then(
                            value => resolve(value),
                            reason => reject(reason)
                        )
                        // 简洁版
                        // result.then(resolve, reject)
                    } else {
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }

            if (self.status === PENDING) {
                self.callbacks.push({
                    onResolved (value) {
                        handle(onResolved)
                    },
                    onRejected (reason) {
                        handle(onRejected)
                    }
                })
            } else if (self.status === RESOLVED) {
                setTimeout(() => {
                    handle(onResolved)
                });
            } else { // self.status = REJECTED
                setTimeout(() => {
                    handle(onRejected)
                });
            }
        })
    }

四、完善catch方法

// Promise原型对象的catch()，指定失败的回调函数，返回一个新的promise对象
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected)
}

五、完善resolve方法

// Promise函数对象的 resolve 方法
//返回一个新的Promise对象,Promise.resolve()中可以传入Promise
Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(resolve, reject)
        } else {
            resolve(value)
        }
    })
}

六、完善reject方法

// Promise函数对象的 reject 方法
    //返回一个新的Promise对象 Promise.reject中不能再传入Promise
    Promise.reject = function (reason) {
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }

七、完善all方法

 // Promise函数对象的all方法
Promise.all = function (promises) {
    const values = new Array(promises.length)
    let successCount = 0
    return new Promise((resolve, reject) => {
        promises.forEach((p, index) => {
            Promise.resolve(p).then(
                value => {
                    successCount++
                    values[index] = value
                    if (successCount === promises.length) {
                        resolve(values)
                    } 
                },
                // 如果失败
                reason => {
                    reject(reason)
                }
            )
        })
    })
}

八、完善race方法

// Promise函数对象的race方法
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        promises.forEach(p => {
            Promise.resolve(p).then(
                value => {
                    resolve(value)
                }, reason => {
                    reject(reason)
                }
            )
        })
    })
}

总结：

  1. es5版本

    // 自定义Promise函数模块: IIFE
(function (window) {

    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'
    // Promise构造函数
    // executor: 执行器函数（同步执行）
    function Promise(executor) {
        const self = this
        self.status = PENDING
        self.data = undefined
        self.callbacks = []

        function resolve(value) {
            if (self.status !== PENDING) {
                return 
            }
            // 将状态改为resolved
            self.status = RESOLVED
            // 保存value数据
            self.data = value
            // 如果有待执行的callback函数，立即异步执行回调函数onResolved
            if (self.callbacks.length > 0) {
                setTimeout(() => {
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value)
                    })
                });
            }
        }

        function reject(reason) {
            if (self.status !== PENDING) {
                return 
            }
            // 将状态改为resolved
            self.status = REJECTED
            // 保存value数据
            self.data = reason
            // 如果有待执行的callback函数，立即异步执行回调函数onRejected
            if (self.callbacks.length > 0) {
                setTimeout(() => {
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason)
                    })
                });
            }
        }

        // 立即同步执行executor
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }

    // Promise原型对象的then(),指定成功和失败的回调函数，返回一个新的Promise对象
    Promise.prototype.then = function (onResolved, onRejected) {
        onResolved = typeof onResolved === 'function' ? onResolved : value => value
        onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}

        const self = this
        return new Promise((resolve, reject) => {
            function handle(callback) {
                try {
                    const result = callback(self.data)
                    if (result  instanceof Promise) {
                        result.then(
                            value => resolve(value),
                            reason => reject(reason)
                        )
                        // 简洁版
                        // result.then(resolve, reject)
                    } else {
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }

            if (self.status === PENDING) {
                self.callbacks.push({
                    onResolved (value) {
                        handle(onResolved)
                    },
                    onRejected (reason) {
                        handle(onRejected)
                    }
                })
            } else if (self.status === RESOLVED) {
                setTimeout(() => {
                    handle(onResolved)
                });
            } else { // self.status = REJECTED
                setTimeout(() => {
                    handle(onRejected)
                });
            }
        })
    }

    // Promise原型对象的catch()，指定失败的回调函数，返回一个新的promise对象
    Promise.prototype.catch = function (onRejected) {
        return this.then(undefined, onRejected)
    }

    // Promise函数对象的 resolve 方法
    //返回一个新的Promise对象,Promise.resolve()中可以传入Promise
    Promise.resolve = function (value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(resolve, reject)
            } else {
                resolve(value)
            }
        })
    }

    // Promise函数对象的 reject 方法
    //返回一个新的Promise对象 Promise.reject中不能再传入Promise
    Promise.reject = function (reason) {
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }

    // Promise函数对象的all方法
    Promise.all = function (promises) {
        const values = new Array(promises.length)
        let successCount = 0
        return new Promise((resolve, reject) => {
            promises.forEach((p, index) => {
                Promise.resolve(p).then(
                    value => {
                        successCount++
                        values[index] = value
                        if (successCount === promises.length) {
                            resolve(values)
                        } 
                    },
                    // 如果失败
                    reason => {
                        reject(reason)
                    }
                )
            })
        })
    }

    // Promise函数对象的race方法
    Promise.race = function (promises) {
        return new Promise((resolve, reject) => {
            promises.forEach(p => {
                Promise.resolve(p).then(
                    value => {
                        resolve(value)
                    }, reason => {
                        reject(reason)
                    }
                )
            })
        })
    }

    // 向外暴露promise函数
    window.Promise = Promise
})(window)

  2. class版本

(function (window) {

    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'

    class Promise {
        constructor(executor) {
            const self = this
            self.status = PENDING
            self.data = undefined
            self.callbacks = []

            function resolve(value) {
                if (self.status !== PENDING) {
                    return
                }
                // 将状态改为resolved
                self.status = RESOLVED
                // 保存value数据
                self.data = value
                // 如果有待执行的callback函数，立即异步执行回调函数onResolved
                if (self.callbacks.length > 0) {
                    setTimeout(() => {
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onResolved(value)
                        })
                    });
                }
            }

            function reject(reason) {
                if (self.status !== PENDING) {
                    return
                }
                // 将状态改为resolved
                self.status = REJECTED
                // 保存value数据
                self.data = reason
                // 如果有待执行的callback函数，立即异步执行回调函数onRejected
                if (self.callbacks.length > 0) {
                    setTimeout(() => {
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onRejected(reason)
                        })
                    });
                }
            }

            // 立即同步执行executor
            try {
                executor(resolve, reject)
            } catch (error) {
                reject(error)
            }
        }

        // Promise原型对象的then(),指定成功和失败的回调函数，返回一个新的Promise对象
        then(onResolved, onRejected) {
            onResolved = typeof onResolved === 'function' ? onResolved : value => value
            onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

            const self = this
            return new Promise((resolve, reject) => {
                function handle(callback) {
                    try {
                        const result = callback(self.data)
                        if (result instanceof Promise) {
                            result.then(
                                value => resolve(value),
                                reason => reject(reason)
                            )
                            // 简洁版
                            // result.then(resolve, reject)
                        } else {
                            resolve(result)
                        }
                    } catch (error) {
                        reject(error)
                    }
                }

                if (self.status === PENDING) {
                    self.callbacks.push({
                        onResolved(value) {
                            handle(onResolved)
                        },
                        onRejected(reason) {
                            handle(onRejected)
                        }
                    })
                } else if (self.status === RESOLVED) {
                    setTimeout(() => {
                        handle(onResolved)
                    });
                } else { // self.status = REJECTED
                    setTimeout(() => {
                        handle(onRejected)
                    });
                }
            })
        }

        // Promise原型对象的catch()，指定失败的回调函数，返回一个新的promise对象
        catch(onRejected) {
            return this.then(undefined, onRejected)
        }

        // Promise函数对象的 resolve 方法
        //返回一个新的Promise对象,Promise.resolve()中可以传入Promise
        static resolve = function (value) {
            return new Promise((resolve, reject) => {
                if (value instanceof Promise) {
                    value.then(resolve, reject)
                } else {
                    resolve(value)
                }
            })
        }

        // Promise函数对象的 reject 方法
        //返回一个新的Promise对象 Promise.reject中不能再传入Promise
        static reject = function (reason) {
            return new Promise((resolve, reject) => {
                reject(reason)
            })
        }

        // Promise函数对象的all方法
        static all = function (promises) {
            const values = new Array(promises.length)
            let successCount = 0
            return new Promise((resolve, reject) => {
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(
                        value => {
                            successCount++
                            values[index] = value
                            if (successCount === promises.length) {
                                resolve(values)
                            }
                        },
                        // 如果失败
                        reason => {
                            reject(reason)
                        }
                    )
                })
            })
        }

        // Promise函数对象的race方法
        static race = function (promises) {
            return new Promise((resolve, reject) => {
                promises.forEach(p => {
                    Promise.resolve(p).then(
                        value => {
                            resolve(value)
                        }, reason => {
                            reject(reason)
                        }
                    )
                })
            })
        }
    }
    // 向外暴露promise函数
    window.Promise = Promise
})(window)
ExMaterial
关注
  • 4
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
300秒带你手写一个promise
小陈的博客
05-18 5992
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
手写Promise方法（直击Promise A+规范）
小王的技术库
02-22 795
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7392
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
超详细！一次性搞懂手写Promise全过程
qq_41852789的博客
12-30 7205
手写promise超详细步骤，帮助大家理解每一步代码的含义
面试官：手写一下 Promise 吧！ 我：What？？？
最新发布
weixin_44995391的博客
05-23 610
面试官：手写一下 Promise 吧！ 我：What？？？
【JavaScript】手写Promise
编码世界
05-15 4389
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
手写Promise
XunLin233的博客
05-30 1921
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
JS手写一个自定义Promise操作示例
10-15
在面试中，经常会被要求手写一个简单的Promise实现来理解其工作原理。以下是一个基于class的自定义Promise（命名为MyPromise）的详细解释。 首先，`MyPromise`构造函数接收一个执行器函数`executor`作为参数。这个...
「2021」高频前端面试题汇总之手写代码篇.pdf
12-14
"前端面试题汇总之手写代码篇" 本资源主要对前端面试题的常见问题进行了总结和分类，涵盖了 JavaScript 基础知识、手写代码等方面的知识点。下面是对本资源中提到的知识点的详细解释： 1. 手写 Object.create 方法...
前端面试大厂手写源码系列（上）
01-08
【前端面试大厂手写源码系列（上）】这篇内容主要关注的是前端开发者在面试过程中需要具备的能力，特别是对于常见API的深入理解和手动实现。随着前端技术的不断发展，仅仅熟练使用API已经不足以应对日益复杂的面试...
前端 面试----手写promise（promise自定义封装）
WXY博客
06-09 907
---------简单来说，函数是为了解决异步回调时的一些问题，更准确来说是为了解决我们在开发中，经常会面临的“回调地狱”所给开发者带来的困扰。promise可以被理解成一个方案，来有助于我们快速规避这些麻烦，从而提高我们的开发效率。----------我们知道一个Promise函数的状态必然处于以下几种状态中的一个：待定（pending）已兑现（fulfilled）已拒绝（rejected）
前端必须学会的经典面试题场景之一 —— 手写Promise
weixin_46709512的博客
06-06 2392
手写Promise的正确姿势~ 前端面试涨薪必学，从0实现Promise
手写Promise，一步步实现自己的Promise
小时候可呆了的博客
02-25 1325
手写promise，一步步实现自己的promise，从零到1实现promise
深入理解Promise之一步步教你手写Promise构造函数
zxdznyy的博客
01-27 2000
Promise是前端面试中笔记走重要的一个考点。如何真正的了解promise？我们不如自己动手，写一个可以拿来用的Promise.js。下面是循序递进的写法教学，本文的最后也有完整写法的代码可以借鉴，希望能够帮助大家！后面如果有机会会写一篇详解promise的博客，欢迎关注！
面试题：如何手写一个Promise（详细版）
m0_60255104的博客
10-14 560
【代码】面试题：如何手写一个Promise（详细版）
手写promise，面试无敌
dear_mRZhou_的博客
06-24 1611
我们面试的时候经常会问到Promise的使用；有的面试官再深入一点，会继续问是否了解Promise的实现方式，或者有没有阅读过Promise的源码；今天我们就来看一下，Promise在内部是如何实现来链式调用的。 首先我们定义一个promise的构造函数 在这里插入代码片 ...
教你如何手写一个Promise
ose_huang的博客
02-25 9486
promise的进阶，手写一个自己的promise
Promise高频手写面试题
aixinalei的博客
10-27 1048
Promise 高频手写
手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例
圆圆的 JavaScript 博客
12-20 1574
保姆级教程，看完还不懂的私聊我亲自教！
手写promise 面试
08-21
- *2* [面试准备之手写Promise](https://blog.csdn.net/weixin_49172439/article/details/124514197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值