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

最新推荐文章于 2024-05-04 18:03:08 发布
最新推荐文章于 2024-05-04 18:03:08 发布
阅读量636 收藏 23
点赞数 11
分类专栏： 程序员 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84103488/article/details/138329974
版权

}
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)

最后

这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档

祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！

感谢大家的支持！！

image.png

tions.push(() => {
try {
const thenReturn = onFulfilled(self.value)
if (thenReturn instanceof MyPromise) {
thenReturn.then(resolve, reject)
} else {
resolve(thenReturn)

最后

这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档

祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！

感谢大家的支持！！

[外链图片转存中…(img-wyAHyOYw-1714408037330)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

2401_84103488
关注
专栏目录
10 个 JavaScript Promise 的面试题
web前端开发
06-24 1903
英文 | https://betterprogramming.pub/10-javascript-promise-challenges-before-you-start-an-interview-c9af8d4144ec翻译 | 杨小爱Promise 是 JavaScript 异步编程的关键特性。不管你爱它还是恨它，你都必须理解它。在这里，我整理了一些关于 Promise...
JS中Promise用法（简要说明）
最新发布
Huanzhi_Lin的博客
08-23 886
promise、异步、避免回调地狱、同步方式编程异步
js常见面试题——详解Promise使用与原理及实现过程，2024年前端开发者常见面试题
2401_83945851的博客
03-28 1019
对于以上完成的进行测试，测试代码如下resolve(1)}, 1000)})}), res), res)})/**（3）在 promise 相关的内容中，有一点常常被我们忽略，当 then 函数中返回的是一个 promise 应该如何处理？考虑如下代码：// 使用正确的 Promiseresolve()}, 1000)})console.log(‘外部 promise’)resolve(内部 promise})})
js面试题之Promise
Susan_Q的博客
12-27 1909
文章目录1、promise基本输出题1、new Promise 的参数函数是同步执行2、promise的then函数不同返回值的区别 1、promise promise使用文档 面试题 面试题2 事件循环 基本输出题 1、new Promise 的参数函数是同步执行 const p = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2) }) p.then(() => {
JS - Promise的各种面试问题及分析
kelly0721的博客
10-19 1118
Promise的各种面试问题及分析
js常见面试题——详解Promise使用与原理及实现过程，Web毕业设计项目
2401_84166327的博客
04-08 929
/ 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态。// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态。// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态。// 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态。
2024前端面试题！（附答案及解析）（2024.10月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 17万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.10月最新版）感谢支持，你们的鼓励是我的动力！
JavaScript Promise 学习总结及相关面试题
gggggayu的博客
08-29 597
JavaScript Promise 学习总结 what why how
关于js中promise的面试题。
weixin_33831673的博客
03-26 360
核心点promise在生命周期内有三种状态，分别是pending，fulfilled或rejected，状体改变只能是 pending-fulfilled，或者pending-rejected。而且状态一旦改变就不能再次改变。 题1 promise.resolve().then(() => { console...
分享 10 个 JS Promise 相关的面试题
前端达人
06-27 497
英文 | https://betterprogramming.pub/10-javascript-promise-challenges-before-you-start-an-interview-c9af8d4144ec翻译 | 杨小爱Promise 是 JavaScript 异步编程的关键特性。不管你爱它还是恨它，你都必须理解它。在这里，我整理了一些关于 Promise...
2024年js常见面试题——详解Promise使用与原理及实现过程（附源码），我是如何收割多家大厂offer的
2401_84435152的博客
05-04 983
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。res => {
JavaScript 面试题（十六）Promise 是什么？Promise 都有哪几种状态？
qq_42684926的博客
08-27 365
Promise 是异步编程的解决方案，从语法上讲，Promise 是一个对象，可以获取异步操作的信息。 Promise 的作用： 1.解决回调地狱问题； 2.Promise 提供了简洁的 API，使得控制异步操作更加容易。 Promise 的三种状态： 1.pending 代表正在请求； 2.resolved 代表成功； 3.rejected 代表失败。 Promise 基础用法： new Promise(function(resolve,reject){}) ...
JS前端面试题（二）之Promise的理解
AROUND
05-30 439
JS前端面试题（二）之Promise的理解
JS中Promise的经典面试题
weixin_44806514的博客
06-25 735
写在前面 Promise有三种状态，分别是pending、fulfilled 和 rejected； Promise的状态一旦改变，就不能再次改变； Promise中调用resolve或reject并不会终结 Promise 的参数函数的执行； 题目一 const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2); }); promise.then(() =>
Promise面试题
Mr_Renhappy的博客
05-16 846
15道ES6 Promise实战练习题，助你快速理解Promise 前言 Promise是ES6中新增的特性，现在很多前端框架像AngularJS，Vue等在HTTP请求之后都是返回的Promise处理，因此Promise是必须要掌握的一个知识点。 本文将为大家分享15道由易到难的ES6 Promise题, 帮助你快速理解Promise。 基础题 01 const promise = new Promise((resolve, reject) => { console.log(1)
面试题promise原理
HannaLh的博客
05-15 6989
面试题Promise原理 在Promise的内部，有一个状态管理器的存在，有三种状态：pending、fulfilled、rejected。　　　　 (1) promise 对象初始化状态为 pending。　　　　 (2) 当调用resolve(成功)，会由pending => fulfilled。　　　　 (3) 当调用reject(失败)，会由pending => rejected。　　 需要记住的是注意promsie状态 只能由 pending => fulfilled/rejec
[JavaScript][ES6]关于Promise的面试题
DaftJayee的博客
09-27 339
https://juejin.im/post/6844904077537574919
Vue源码nextTick深度解析：使用与实现机制详解
本文将深入解析`nextTick`的使用场景以及其背后的原理。 1. **nextTick的使用** Vue在处理数据变更时，并不会立即更新DOM，而是遵循“响应式”的设计原则。当你修改一个数据属性（例如`this.msg`），Vue会将其标记...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值