js常见面试题——详解Promise使用与原理及实现过程（附源码）

于 2024-06-18 20:41:14 发布
阅读量445 收藏 18
点赞数 16
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85124905/article/details/139782928
版权

Promise.race(promises).then(
res => {
// 此时只有 promise1 resolve 了，promise2 仍处于 pending 状态
},
err => {}
)

四、配合 async await 使用

现在的开发场景中我们大多会用 async await 语法糖来等待一个 promise 的执行结果，使代码的可读性更高。async 本身是一个语法糖，将函数的返回值包在一个 promise 中返回。

// async 函数会返回一个 promise
const p = async function f() {
return ‘hello world’
}
p.then(res => console.log(res)) // hello world

五、开发技巧

在前端开发上 promise 大多被用来请求接口，Axios 库也是开发中使用最频繁的库，但是频繁的 try catch 扑捉错误会让代码嵌套很严重。考虑如下代码的优化方式

const getUserInfo = async function() {
return new Promise((resolve, reject) => {
// resolve() || reject()
})
}
// 为了处理可能的抛错,不得不将 try catch 套在代码外边，
// 一旦嵌套变多，代码可读性就会急剧下降
try {
const user = await getUserInfo()
} catch (e) {}

好的处理方法是在异步函数中就将错误 catch，然后正常返回，如下所示 👇

const getUserInfo = async function() {
return new Promise((resolve, reject) => {
// resolve() || reject()
}).then(
res => {
return [res, null] // 处理成功的返回结果
},
err => {
return [null, err] // 处理失败的返回结果
}
)
}

const [user, err] = await getUserInfo()
if (err) {
// err 处理
}

// 这样的处理是不是清晰了很多呢

六、Promise 源码实现

知识的学习需要知其然且知其所以然，所以通过一点点实现的一个 promise 能够对 promise 有着更深刻的理解。

（1）首先按照最基本的 promise 调用方式实现一个简单的 promise （基于 ES6 规范编写），假设我们有如下调用方式

new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 1000)
})
.then(
res => {
console.log(res)
return 2
},
err => {}
)
.then(
res => {
console.log(res)
},
err => {}
)

我们首先要实现一个 Promise 的类，这个类的构造函数会传入一个函数作为参数，并且向该函数传入 resolve 和 reject 两个方法。
初始化 Promise 的状态为 pending。

class MyPromise {
constructor(executor) {
this.executor = executor
this.value = null
this.status = ‘pending’

const resolve = value => {
if (this.status === ‘pending’) {
this.value = value // 调用 resolve 后记录 resolve 的值
this.status = ‘fulfilled’ // 调用 resolve 扭转 promise 状态
}
}

const reject = value => {
if (this.status === ‘pending’) {
this.value = value // 调用 reject 后记录 reject 的值
this.status = ‘rejected’ // 调用 reject 扭转 promise 状态
}
}

this.executor(resolve, reject)
}

（2）接下来要实现 promise 对象上的 then 方法，then 方法会传入两个函数作为参数，分别作为 promise 对象 resolve 和 reject 的处理函数。
这里要注意三点：

  • then 函数需要返回一个新的 promise 对象
  • 执行 then 函数的时候这个 promise 的状态可能还没有被扭转为 fulfilled 或 rejected
  • 一个 promise 对象可以同时多次调用 then 函数

class MyPromise {
constructor(executor) {
this.executor = executor
this.value = null
this.status = ‘pending’
this.onFulfilledFunctions = [] // 存放这个 promise 注册的 then 函数中传的第一个函数参数
this.onRejectedFunctions = [] // 存放这个 promise 注册的 then 函数中传的第二个函数参数
const resolve = value => {
if (this.status === ‘pending’) {
this.value = value
this.status = ‘fulfilled’
this.onFulfilledFunctions.forEach(onFulfilled => {
onFulfilled() // 将 onFulfilledFunctions 中的函数拿出来执行
})
}
}
const reject = value => {
if (this.status === ‘pending’) {
this.value = value
this.status = ‘rejected’
this.onRejectedFunctions.forEach(onRejected => {
onRejected() // 将 onRejectedFunctions 中的函数拿出来执行
})
}
}
this.executor(resolve, reject)
}

then(onFulfilled, onRejected) {
const self = this
if (this.status === ‘pending’) {
/**

  • 当 promise 的状态仍然处于 ‘pending’ 状态时，需要将注册 onFulfilled、onRejected 方法放到 promise 的 onFulfilledFunctions、onRejectedFunctions 备用
    */
    return new MyPromise((resolve, reject) => {
    this.onFulfilledFunctions.push(() => {
    const thenReturn = onFulfilled(self.value)
    resolve(thenReturn)
    })
    this.onRejectedFunctions.push(() => {
    const thenReturn = onRejected(self.value)
    resolve(thenReturn)
    })
    })
    } else if (this.status === ‘fulfilled’) {
    return new MyPromise((resolve, reject) => {
    const thenReturn = onFulfilled(self.value)
    resolve(thenReturn)
    })
    } else {
    return new MyPromise((resolve, reject) => {
    const thenReturn = onRejected(self.value)
    resolve(thenReturn)
    })
    }
    }
    }

对于以上完成的 MyPromise 进行测试，测试代码如下

const p = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 1000)
})

p.then(res => {
console.log(‘first then’, res)
return res + 1
}).then(res => {
console.log(‘first then’, res)
})

p.then(res => {
console.log(second then, res)
return res + 1
}).then(res => {
console.log(second then, res)
})

/**

  • 输出结果如下：
  • first then 1
  • first then 2
  • second then 1
  • second then 2
    */

（3）在 promise 相关的内容中，有一点常常被我们忽略，当 then 函数中返回的是一个 promise 应该如何处理？
考虑如下代码：

// 使用正确的 Promise
new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
})
.then(res => {
console.log(‘外部 promise’)
return new Promise((resolve, reject) => {
resolve(内部 promise)
})
})
.then(res => {
console.log(res)
})

/**

  • 输出结果如下：
  • 外部 promise
  • 内部 promise
    */

通过以上的输出结果不难判断，当 then 函数返回的是一个 promise 时，promise 并不会直接将这个 promise 传递到下一个 then 函数，而是会等待该 promise resolve 后，将其 resolve 的值，传递给下一个 then 函数，找到我们实现的代码的 then 函数部分，做以下修改：

then(onFulfilled, onRejected) {
const self = this
if (this.status === ‘pending’) {
return new MyPromise((resolve, reject) => {
this.onFulfilledFunctions.push(() => {
const thenReturn = onFulfilled(self.value)
if (thenReturn instanceof MyPromise) {
// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
})
this.onRejectedFunctions.push(() => {
const thenReturn = onRejected(self.value)
if (thenReturn instanceof MyPromise) {
// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
})
})
} else if (this.status === ‘fulfilled’) {
return new MyPromise((resolve, reject) => {
const thenReturn = onFulfilled(self.value)
if (thenReturn instanceof MyPromise) {
// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
})
} else {
return new MyPromise((resolve, reject) => {
const thenReturn = onRejected(self.value)
if (thenReturn instanceof MyPromise) {
// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
})
}
}

(4) 之前的 promise 实现代码仍然缺少很多细节逻辑，下面会提供一个相对完整的版本，注释部分是增加的代码，并提供了解释。

class MyPromise {
constructor(executor) {
this.executor = executor
this.value = null
this.status = ‘pending’
this.onFulfilledFunctions = []
this.onRejectedFunctions = []
const resolve = value => {
if (this.status === ‘pending’) {
this.value = value
this.status = ‘fulfilled’
this.onFulfilledFunctions.forEach(onFulfilled => {
onFulfilled()
})
}
}
const reject = value => {
if (this.status === ‘pending’) {
this.value = value
this.status = ‘rejected’
this.onRejectedFunctions.forEach(onRejected => {
onRejected()
})
}
}
this.executor(resolve, reject)
}

then(onFulfilled, onRejected) {
const self = this
if (typeof onFulfilled !== ‘function’) {
// 兼容 onFulfilled 未传函数的情况
onFulfilled = function() {}
}
if (typeof onRejected !== ‘function’) {
// 兼容 onRejected 未传函数的情况
onRejected = function() {}
}
if (this.status === ‘pending’) {
return new MyPromise((resolve, reject) => {
this.onFulfilledFunctions.push(() => {
try {
const thenReturn = onFulfilled(self.value)
if (thenReturn instanceof MyPromise) {
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
} catch (err) {
// catch 执行过程的错误
reject(err)
}
})
this.onRejectedFunctions.push(() => {
try {
const thenReturn = onRejected(self.value)
if (thenReturn instanceof MyPromise) {
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
} catch (err) {
// catch 执行过程的错误
reject(err)
}
})
})
} else if (this.status === ‘fulfilled’) {
return new MyPromise((resolve, reject) => {
try {
const thenReturn = onFulfilled(self.value)
if (thenReturn instanceof MyPromise) {
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)
}
} catch (err) {
// catch 执行过程的错误
reject(err)
}
})
} else {
return new MyPromise((resolve, reject) => {
try {

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

2401_85124905
关注
  • 16
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise的理解（面试题）
m0_49456900的博客
03-22 5444
Promise的基本用法、promise三种状态？总结Promise.resolve()方法参数的几种情况、Promise.all()和promise.race()、promise.any()的区别？Then方法中return的作用？
【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序
二三的博客
09-23 6936
上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！
Promise面试题合集(问题+答案)
DeepLearning_的博客
01-12 3217
好的，让我们来总结一下.then()和.race()吧，😄的作用是接收一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调。.race()的作用也是接收一组异步任务，然后并行执行异步任务，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。结果中数组的顺序和接收到的数组顺序一致。all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；
10 个 JavaScript Promise 的面试题
web前端开发
06-24 1867
英文 | https://betterprogramming.pub/10-javascript-promise-challenges-before-you-start-an-interview-c9af8d4144ec翻译 | 杨小爱Promise 是 JavaScript 异步编程的关键特性。不管你爱它还是恨它，你都必须理解它。在这里，我整理了一些关于 Promise...
Promise的常见面试题
小草莓的博客
07-04 1392
一、对Promise的理解以及Promise的基本用法 二、Promise的其他常见方法 三、Promise的常见面试题 ① 多个.catch ② 多个.catch（不懂） ③ 链接.then和.catch（不懂） ④ 链接.catch（不懂） ⑤ 多个.catch（不懂） ⑥.then之间的流程 ⑦.then之间的流程 ⑧.then之间的流程 ⑨.then和.catch之间的流程（不懂） ⑩ 基础输出题 11、用Promise实现红绿灯不断交替亮
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
10-15
主要介绍了JS前端面试基本排序算法原理与实现方法,结合实例形式详细分析了JS常见的基本排序算法相关原理、实现方法、时间复杂度及操作注意事项,需要的朋友可以参考下
8大经典Python面试题，附源码及详解
11-14
8大经典Python面试题，附源码及详解。也可做为日常习题进行练习，通过阅读代码和理解它们的解释，可以加深对Python的熟练程度，并提升编程能力。了解这些经典问题的解决方法，不仅可以帮助我们更好地理解Python语言...
29个Vue经典面试题（附源码级详解)
02-24
Vue.js 是一款流行的前端JavaScript框架，它以其轻量级、易于理解和使用的特点，在Web应用开发领域广泛应用。Vue经典面试题的目的是帮助开发者深入理解Vue.js的机制和应用场景，特别是对于那些有前端开发经验，希望...
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3
04-22
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大，压缩后76M左右 所以分为四个包上传
Docker网络详解及pipework源码解读与实践
03-01
本文首先介绍了Docker自身的4种网络工作方式，然后通过3个样例——将Docker容器配置到本地网络环境中、单主机Docker容器的VLAN划分、多主机Docker容器的VLAN划分，演示了如何使用pipework帮助我们进行复杂的网络设置...
JS常见面试题之 详解Promise使用与原理
weixin_43964148的博客
10-25 1941
一：Promise的概念Promise的中文意思是‘承诺’，什么叫承诺？承诺就是现在没有发生，在将来的某个时刻一定会发生的事情。放在编程语言的环境下，Promise就是异步事件的结果的占...
Promise源码浅析
wsd_wsd的博客
04-26 411
在 then 方法中，我们首先创建一个新的 Promise 实例，并定义 onFulfilled 和 onRejected 回调函数，这两个函数分别处理 Promise 实例在 fulfilled 和 rejected 状态下的处理逻辑。在 resolve 和 reject 函数中，我们将 Promise 实例的状态分别设置为 fulfilled 或 rejected，将结果保存在 result 属性中，并依次调用 callbacks 列表中的回调函数。以下是一个简单的 Promise 实现。
面试重点——promise原理以及实现
qq_40566547的博客
09-19 1万+
Promise的三种状态 constructor 我们知道Promise有三种状态： pending resolved(fulfilled) rejected   这三种状态唯一，要么是pending、要么是resolved(fullfiled)、要么是rejected，所以我们在实现的时候需要定义类的三种状态。   除此之外，Promise的构造函数需要我们传入一个函数作为参数，而且这个函数...
Promise超全面试整理
zzzld001的博客
07-23 337
Promise什么是PromisePromise特点Promise缺点Promise 链创建Promise对象Promise方法Promise.all和Promise.race的区别的使用场景代码实现Promise实现 Promise.all 什么是Promise Promise 对象是异步编程的一种解决方案，最早由社区提出。它是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。简单说就是一个容器，里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。 Promise特点 对
promise 以及经典面试题
qq_43944285的博客
05-10 4684
在这里插入代码片
Promise 实现原理
热门推荐
weixin_43299180的博客
02-21 2万+
文章目录一、Promise 介绍二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象； Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。 特点 Pr
2024年js常见面试题——详解Promise使用与原理及实现过程（附源码），我是如何收割多家大厂offer的
最新发布
2401_84435152的博客
05-04 922
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。res => {
面试问 Promise 不会？超级详细的手写Promise原理，带你一步一步写出一个自己的 Promise
秋天，黄叶坠地，凉风有信。
03-12 1642
文章目录Promise 原理 及其 实现一、实现resolve和reject1、resolve与reject2. 状态不可变3. throw二、实现 then1. 实现then2. 定时器情况3. 链式调用4. 微任务三、最后总结 Promise 原理 及其 实现 首先要实现 Promise 就要让我们了解它具体功能 let p1 = new Promise((resolve)=>{ resolve(2) }) console.log(p1); let p2 = new Promise((
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值