当面试官让你手写Promise时，他在问什么？

于 2024-10-20 15:52:03 发布
阅读量420 收藏 4
点赞数 5
文章标签： word
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenzhiyong12/article/details/142372538
版权

        很多小伙伴面试的时候遇到面试题让你手写Promise，实在是一个头两个大，内心OS：这家公司真装逼，面试造火箭，上班还不是拧螺丝，云云......，然后甩手兼摇头，说我不会，然后跟面试say byebye

        那么面试官是不是在装逼呢？

        首先大家要明白这道题往往是出现在中高级工程师面试的时候才会出现，一般考察的是面试者的综合能力：

1）考察面试者对Promise的用法的掌握程度，能写出Promise的链式写法、API、三种状态

2）能根据Promise的用法实现Promise的链式调用

3）能实现then、catch、finally方法，实现微任务事件队列

4）了解all和race的使用，实现all、race方法

5）考察面试者是否具备按照以上思路一步步分析问题并解决问题的能力

第1点，面试者需要厘清这道题所需要实现的API清单：

// 1、Promise的三种状态 pending——进行中  fulfilled——已完成  rejected——已失败
// 2、Promise的链式3调用写法
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000)
}).then((res) => {
    console.log('进入then:', res)
}).catch((err) => {
    console.log('进入catch', err)
}).finally(() => {
    console.log('进入finally', p)
})

// 3、Promise.all与Promise.race
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 2000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(3)
    }, 3000)
})
Promise.all([p1, p2, p3]).then(res => {
    console.log('3秒后打印：', res)
})
Promise.race([p1, p2, p3]).then(res => {
    console.log('1秒后打印：', res)
})

第2点，面试者需要实现Promise的基本框架：

class MyPromise {
    static STATUS_PENDING = 'pending'
    static STATUS_FULFILLED = 'fulfilled'
    static STATUS_REJECTED = 'rejected'

    constructor(callback) {
        return this
    }

    then(resolver) {
        return this
    }

    catch(reject) {
        return this
    }

    finally(fn) {
        return this
    }

    static all(promiseArray) {
        return this
    }

    static race(promiseArray) {
        return this
    }
}

/*
基本实现
new MyPromise((resolve, reject) => {})
    .then(() => {})
    .catch(err => {})
    .finally(() => {})
*/

第3点，实现then、catch、finally方法，实现微任务事件队列。这也是考验面试者脑子是否转的过来的关键一步，在这一步里面我们是需要实现then和catch方法：

class MyPromise {
    static STATUS_PENDING = 'pending'
    static STATUS_FULFILLED = 'fulfilled'
    static STATUS_REJECTED = 'rejected'

    constructor(callback) {
        this.PromiseState = MyPromise.STATUS_PENDING
        this.resolver = function () { }
        this.reject = function () { }
        this.finallyFn = function () { }

        // 模拟微任务事件队列
        setTimeout(() => {
            callback(this.resolver, this.reject)
        }, 0)
        return this
    }

    then(resolver) {
        let ctx = this
        // 封装resolver，待promise回调执行结束后调用resolver时，再去执行this.resolver
        this.resolver = function(res) {
            try {
                resolver(res)
                ctx.PromiseState = MyPromise.STATUS_FULFILLED
            } catch (err) {
                ctx.PromiseState = MyPromise.STATUS_REJECTED
                ctx.reject(err)
            } finally {
                ctx.finallyFn()
            }
        }
        return this
    }

    catch(reject) {
        this.reject = reject
        return this
    }

    finally(fn) {
        this.finallyFn = fn
        return this
    }

    static all(promiseArray) {
        return this
    }

    static race(promiseArray) {
        return this
    }
}

/*
let p = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000)
}).then((res) => {
    console.log('进入then:', res)
}).catch((err) => {
    console.log('进入catch:', err)
}).finally(() => {
    console.log('进入finally:', p)
})

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000)
}).then((res) => {
    console.log('进入then:', res)
}).catch((err) => {
    console.log('进入catch:', err)
}).finally(() => {
    console.log('进入finally:', p)
})
*/

 

这里看代码其实并不多，主要是面试者要如何转换一下思维使then函数的回调在Promise异步事件后执行。其实写到这里如果你能给出答案，在面试官这里你已经过关了，但是卡在这里的人数不胜数

当然这里没有实现then的重复调用的写法，如果面试官继续问你怎么优化，那么你就需要改造一下：

class MyPromise {
    static STATUS_PENDING = 'pending'
    static STATUS_FULFILLED = 'fulfilled'
    static STATUS_REJECTED = 'rejected'

    constructor(callback) {
        let ctx = this
        this.PromiseState = MyPromise.STATUS_PENDING
        this.resolvers = []
        this.reject = function () { }
        this.finallyFn = function () { }

        // 模拟微任务事件队列
        setTimeout(function () {
            let resolver = ctx.resolvers.shift()
            // callback代表promise的回调事件，resolvers[0]代表then的第一个回调
            callback(resolver, ctx.reject)
        }, 0)
        return this
    }

    then(resolver) {
        let ctx = this
        // 封装resolver，待promise回调执行结束后调用resolver时，再去执行this.resolver
        this.resolvers.push(function (res) {
            try {
                let result = resolver(res)
                while (ctx.resolvers.length) {
                    if (ctx.PromiseState === MyPromise.STATUS_PENDING) {
                        let resolverFn = ctx.resolvers.shift()// 执行完一个回调，释放一个回调
                        resolverFn(result)
                        if (!ctx.resolvers.length) {
                            ctx.PromiseState = MyPromise.STATUS_FULFILLED
                        }
                    }
                }
            } catch (err) {
                if (ctx.PromiseState !== MyPromise.STATUS_REJECTED) {
                    ctx.reject(err)
                    ctx.PromiseState = MyPromise.STATUS_REJECTED
                }
            } finally {
                if (ctx.PromiseState === MyPromise.STATUS_FULFILLED || ctx.PromiseState === MyPromise.STATUS_REJECTED) {
                    ctx.finallyFn()
                }
            }
        })
        return this
    }

    catch(reject) {
        this.reject = reject
        return this
    }

    finally(fn) {
        this.finallyFn = fn
        return this
    }

    static all(promiseArray) {
        return this
    }

    static race(promiseArray) {
        return this
    }
}

第四点，实现all和race，这里一方面也是考察面试者对all和race的使用，一方面也很考验面试者的编程能力：

Promise.all的使用

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 2000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(3)
    }, 3000)
})
Promise.all([p1, p2, p3]).then(res => {
    console.log('3秒后打印：', res)
})

按照需求实现all，这里其实大家看看就好了，一般也不会有那么变态的面试官会往下问，最多就考考你伪代码：

class MyPromise {
    static STATUS_PENDING = 'pending'
    static STATUS_FULFILLED = 'fulfilled'
    static STATUS_REJECTED = 'rejected'

    constructor(callback) {
        let ctx = this
        this.PromiseState = MyPromise.STATUS_PENDING
        this.resolvers = []
        this.reject = function () { }
        this.finallyFn = function () { }

        // 模拟微任务事件队列
        setTimeout(function () {
            let resolver = ctx.resolvers.shift()
            // callback代表promise的回调事件，resolvers[0]代表then的第一个回调
            callback(resolver, ctx.reject)
        }, 0)
        return this
    }

    then(resolver) {
        let ctx = this
        // 封装resolver，待promise回调执行结束后调用resolver时，再去执行this.resolver
        this.resolvers.push(function (res) {
            try {
                let result = resolver(res)
                while (ctx.resolvers.length) {
                    if (ctx.PromiseState === MyPromise.STATUS_PENDING) {
                        let resolverFn = ctx.resolvers.shift()// 执行完一个回调，释放一个回调
                        resolverFn(result)
                        if (!ctx.resolvers.length) {
                            ctx.PromiseState = MyPromise.STATUS_FULFILLED
                        }
                    }
                }
            } catch (err) {
                if (ctx.PromiseState !== MyPromise.STATUS_REJECTED) {
                    ctx.reject(err)
                    ctx.PromiseState = MyPromise.STATUS_REJECTED
                }
            } finally {
                if (ctx.PromiseState === MyPromise.STATUS_FULFILLED || ctx.PromiseState === MyPromise.STATUS_REJECTED) {
                    ctx.finallyFn()
                }
            }
        })
        return this
    }

    catch(reject) {
        this.reject = reject
        return this
    }

    finally(fn) {
        this.finallyFn = fn
        return this
    }

    static all(promiseArray) {
        const maxResolveNum = promiseArray.length
        let resolveNum = 0
        let resolveArray = new Array(maxResolveNum)
        promiseArray.forEach(function (promise, i) {
            //为每个promise添加then方法
            promise.then(function (res) {
                resolveArray[i] = res
                resolveNum += 1
                return res
            }).catch(err => {
                throw err
            })
        });
        return new MyPromise(function (resolve, reject) {
            promiseArray.forEach(function (promise) {
                promise.then(function (res) {
                    if (resolveNum === maxResolveNum) {
                        resolve(resolveArray)
                    }
                    return res
                })
            });
        })
    }

    static race(promiseArray) {
        return this
    }
}
let p1 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 1000)
}).then(res => {
    console.log('res:', res)
    return res
})
let p2 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 2000)
}).then(res => {
    console.log('res:', res)
    return res
})
let p3 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(3)
    }, 3000)
}).then(res => {
    console.log('res:', res)
    return res
})
MyPromise.all([p1, p2, p3]).then(res => {
    console.log('3秒后打印：', res)
})

实现race方法：

class MyPromise {
    static STATUS_PENDING = 'pending'
    static STATUS_FULFILLED = 'fulfilled'
    static STATUS_REJECTED = 'rejected'

    constructor(callback) {
        let ctx = this
        this.PromiseState = MyPromise.STATUS_PENDING
        this.resolvers = []
        this.reject = function () { }
        this.finallyFn = function () { }

        // 模拟微任务事件队列
        setTimeout(function () {
            let resolver = ctx.resolvers.shift()
            // callback代表promise的回调事件，resolvers[0]代表then的第一个回调
            callback(resolver, ctx.reject)
        }, 0)
        return this
    }

    then(resolver) {
        let ctx = this
        // 封装resolver，待promise回调执行结束后调用resolver时，再去执行this.resolver
        this.resolvers.push(function (res) {
            try {
                let result = resolver(res)
                while (ctx.resolvers.length) {
                    if (ctx.PromiseState === MyPromise.STATUS_PENDING) {
                        let resolverFn = ctx.resolvers.shift()// 执行完一个回调，释放一个回调
                        resolverFn(result)
                        if (!ctx.resolvers.length) {
                            ctx.PromiseState = MyPromise.STATUS_FULFILLED
                        }
                    }
                }
            } catch (err) {
                if (ctx.PromiseState !== MyPromise.STATUS_REJECTED) {
                    ctx.reject(err)
                    ctx.PromiseState = MyPromise.STATUS_REJECTED
                }
            } finally {
                if (ctx.PromiseState === MyPromise.STATUS_FULFILLED || ctx.PromiseState === MyPromise.STATUS_REJECTED) {
                    ctx.finallyFn()
                }
            }
        })
        return this
    }

    catch(reject) {
        this.reject = reject
        return this
    }

    finally(fn) {
        this.finallyFn = fn
        return this
    }

    static all(promiseArray) {
        const maxResolveNum = promiseArray.length
        let resolveNum = 0
        let resolveArray = new Array(maxResolveNum)
        promiseArray.forEach(function (promise, i) {
            //为每个promise添加then方法
            promise.then(function (res) {
                resolveArray[i] = res
                resolveNum += 1
                return res
            }).catch(err => {
                throw err
            })
        });
        return new MyPromise(function (resolve, reject) {
            promiseArray.forEach(function (promise) {
                promise.then(function (res) {
                    if (resolveNum === maxResolveNum) {
                        resolve(resolveArray)
                    }
                    return res
                })
            });
        })
    }

    static race(promiseArray) {
        let resolveNum = 0
        promiseArray.forEach(function (promise, i) {
            //为每个promise添加then方法
            promise.then(function (res) {
                resolveNum += 1
                return res
            }).catch(err => {
                resolveNum += 1
                throw err
            })
        });
        return new MyPromise(function (resolve, reject) {
            promiseArray.forEach(function (promise) {
                promise.then(function (res) {
                    if (resolveNum === 1) {
                        resolve(res)
                    }
                    return res
                })
            });
        })
    }
}

整个实现过程其实实现起来还是比较有难度的，尤其是Promise的一些特性及细节处理。当然一般面试过程中并不会问得太过深，主要考察的还是逻辑思考方面的能力及应变能力。真要符合Promise A+规范，那就得大家多多思考啦

手写promise(面试版)
Donnien的博客
07-10 378
(function () { "use strict"; function Promise(executor) { var self = this; if (typeof executor !== "function") throw new TypeError("Promise resolver is not a function"); if (!(self instanceof Promise)) throw new TypeError("
手写promise-面试版
2402_85402030的博客
06-05 1127
then回调是支持链式调用的，也就是then.then.then，并且由api特性可知then是return一个promise的，并且这个promise的res是上一个promise的。，仔细看这一步，我们之前的想法是让这个定时器回调push到队列中，但如果这样写的话相当于将回调执行后的返回值push到队列中，仔细想想是不是这样呢！的then回调，当then回调检测到状态没有发生改变则将回调函数push到各种的队列中，状态发生改变后在从队列中取出回调函数执行。时then回调会出现问题。
2024年前端最全前端面试之问到promise怎么办？，准备前端面试
2401_84446580的博客
05-06 933
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。return;
面试题：手写Promise
前端御书房
07-23 344
实现Promise，持续更新中……
【面试题】手写Promise
zx1041561837的博客
12-14 142
本文给出了手写Promise的代码，具体包括Promise的构造函数，then和catch方法，Promise的静态API，包括resolve，reject，all和race。
面试题——————手写一个Promise
weixin_57089449的博客
03-21 1631
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reason = null function resolve(value) { if (self.status ===
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解...因此，在准备手写Promise面试时，面试者需要通过大量的练习和理解，确保自己能够熟练地手写出一个符合Promise规范的简单实现，并对相关问题进行正确的解答。
手写一个Promise/A+,完美通过官方872个测试用例
01-08
Promise几乎是面试必考点，所以我们不能仅仅会用，还得知道他的底层原理，学习他原理的最好方法就是自己也实现一个Promise。所以本文会自己实现一个遵循Promise/A+规范的Promise。实现之后，我们还要用Promise/A+...
Promise ? 我 promise 你一个详细的手撕过程
最新发布
Mr_wyt的博客
08-14 347
Promise的手写过程不是很难，大家自己动手理清思路和重要，下面是我手写Promise的源码，就实现了一些常用Promise的方法,所有的测试都能跑通,XDM放心食用,更详细的讲解放在最后了！
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
qq_43375584的博客
07-07 4363
CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决
手写promise，面试无敌
dear_mRZhou_的博客
06-24 1684
我们面试的时候经常会问到Promise的使用；有的面试官再深入一点，会继续问是否了解Promise的实现方式，或者有没有阅读过Promise的源码；今天我们就来看一下，Promise在内部是如何实现来链式调用的。 首先我们定义一个promise的构造函数 在这里插入代码片 ...
手写Promise，前端面试~
前端_小白白白白的博客
02-28 577
手写Promise，前端面试必备！！！ 相信很多小伙伴在笔试的时候可能都见过手写promise 这道题，不知道有没有跟我一样看到这道题一点思路都没有，一行代码也写不出来的，多多少少还是因为我们对promise解决异步编程还不太熟悉,如果想对promise有更深入的了解，推荐去看尚硅谷李超老师讲的Promise教程从入门到精通，由浅入深，比较容易听得懂。本篇文章就是根据视频教程写下的笔记。 先对promise的有初步的认识，promise对象有三个状态(PromiseState)，分别是①pending初始
手写promise(经典面试题)
qingsemengshou的博客
08-05 645
class SPromise { constructor(executer) { this.state = "pending"; this.value = null; this.reason = null; this.onResolvedList = []; this.onRejectedList = []; let resolve = (value) => { if (t.
面试准备之手写Promise
weixin_49172439的博客
04-30 2484
本文是我在看完尚硅谷Promise教程后整理的手写Promsie，内容可能会稍许有点偏差，仅供参考。 当然，都看到手写Promise了，所以肯定对Promise的基本使用是没问题了，下面就来看看如何手写一份Promise吧。 一、搭建Promise骨架 新建lib文件夹，添加Promise.js文件。 首先采用ES5语法实现，后续会讲解ES6语法实现 // 自定义Promise函数模块: IIFE (function (window) { // Promise构造函数 // executor
前端 面试----手写promise（promise自定义封装）
WXY博客
06-09 1033
---------简单来说，函数是为了解决异步回调时的一些问题，更准确来说是为了解决我们在开发中，经常会面临的“回调地狱”所给开发者带来的困扰。promise可以被理解成一个方案，来有助于我们快速规避这些麻烦，从而提高我们的开发效率。----------我们知道一个Promise函数的状态必然处于以下几种状态中的一个：待定（pending）已兑现（fulfilled）已拒绝（rejected）
面试题系列 手写Promise
m0_56825253的博客
04-17 187
2023年面试手写题系列----Promise
前端面试大全：手写 Promise
itKingOne的博客
01-15 2599
(内容同步自小邹的头条号：沪漂程序员的生活史) 在上一篇文章中我们了解了 Promise 的一些易错点，那这一篇文章，我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它，并且手写 Promise 也是一道大厂常考题，在进入正题之前，推荐各位去网上找下Promise/A+规范，这样才能更好地理解这个章节的代码。   实现一个简易版 Promise 在完成符...
手写一个Promise（面试够用）
qq_40893095的博客
05-12 5018
// 测试案例 new Promise((resolve, reject) => { setTimeout(() => resolve(new Promise(res => res(333))), 2000) }).then(res => { console.log(res) return 222 }).then().then(res => { console.log(res); return new Promise(res => {
前端面试考点之---手写Promise
weixin_34062469的博客
08-31 385
写在前面： 在目前的前端分开中，我们对于异步方法的使用越来越频繁，那么如果处理异步方法的返回结果，如果优雅的进行异步处理对于一个合格的前端开发者而言就显得尤为重要，其中在面试中被问道最多的就是对Promise方法的掌握情况，本章将和大家一起分析和完成一个Promise方法，希望对你的学习有一定的帮助。 了解Promise 既然我们是要模仿ES6的Promise，那我们必然要知道这个方法主要都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值