手写简易版的Promise

最新推荐文章于 2023-05-30 11:06:04 发布
最新推荐文章于 2023-05-30 11:06:04 发布
阅读量137 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43569680/article/details/118651693
版权
本文通过手写简易版的Promise，深入探讨其工作原理，帮助读者更好地理解和运用JavaScript中的异步处理。
摘要由CSDN通过智能技术生成

手写简易版的Promise

/*
首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护
*/
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
function MyPromise(fn) {
   
    //创建了常量 that ，因为代码可能会异步执行，用于获取正确的this 对象
    const that = this
    //一开始的状态是pending
    that.state = PENDING
    //value 变量用于保存 resolve 或者 reject 中传入的值
    that.value = null
    //resolvedCallbacks 和 rejectedCallbacks 用于保存 then 中的回调，因为当执行完 Promise 时状态可能还是等待中，这时候应该把 then 中的回调保存起来用于状态改变时使用
    that.resolvedCallbacks = []
    that.rejectedCallbacks = <
最低0.47元/天 解锁文章
努力不熬夜的小喵
关注
一起来手写简易版promise
qq_43352105的博客
07-29 505
相信大家学了promise后，面试都会遇到手写promise的现象，我也尝试了通过自己的理解来简单的实现promise手写，发现只要将官方的promise整个API执行了解透彻，手写其实还是很好掌握的，一起来看看~ 核心逻辑 首先我们需要知道promise的核心逻辑 01 Promise是一个类，在执行类的时候，需要传递一个执行器，只要new了，执行器就会执行 02 Promise中有三种状态，等待Pending，成功Fulfilled，失败Rejectd，一旦确定就不能再更改 03 resolve和rej
手写简易版Promise
泰阳的博客
06-11 484
// 实现一个简易版的promise //先创建三个常量用于表示状态 const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this that.state = PENDING //一开始Pro...
手写简易版promise
weixin_38422903的博客
05-05 265
const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function MyPromise(fn) { const that = this; that.state = PENDING; that.value = null; that.r...
手写Promise简单版
Geek_ting的博客
11-19 209
手写Promise简易版
手写简单版 Promise
薛小科的博客
06-27 326
Promise 是异步编程的的最终结果，Promise 有三种状态： pending、fulfilled、rejected。只有异步操作的结果可以决定当前是哪一种状态，其它任何操作都无法改变。与之进行交互的方式主要是 then 方法，该方法注册了两个回调函数，用于接收 Promise 的终值或 promise 不能执行的原因。 当 then 中的回调函数不是函数的时候，会忽略当前 then 方法，...
手写实现一个简单版本的promise
pz1021的博客
04-08 473
手写一个promise实际上是非常复杂的,一个简洁版本的可以让我们明确设计思路 // 三个常量用于表示状态 const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' function MyPromise(fn) { const that = this this.state =...
ES6手写Promise
最新发布
08-08
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰,同时使用queueMicrotask 来排队执行，确保处理微任务逻辑的正确性
前端面试大全：手写 Promise
itKingOne的博客
01-15 2493
(内容同步自小邹的头条号：沪漂程序员的生活史) 在上一篇文章中我们了解了 Promise 的一些易错点，那这一篇文章，我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它，并且手写 Promise 也是一道大厂常考题，在进入正题之前，推荐各位去网上找下Promise/A+规范，这样才能更好地理解这个章节的代码。   实现一个简易版 Promise 在完成符...
面试中的需求，手写一个符合Promise/A+规范的Promise
g1437353759的博客
10-24 365
手写 Promise 我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它，并且手写 Promise 也是一道大厂常考题，在进入正题之前，推荐各位阅读一下 Promise/A+ 规范，这样才能更好地理解这个章节的代码。 实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前，我们可以先来实现一个简易版 Promise，因为在面试中，如果你能实现出一个简易版的 Promise 基本可以过关了。 那么我们先来搭建构建函数的大体框架 const PENDIN
面试题 手写Promise
YufJi的博客
07-10 1016
class Promise{  constructor(executor){    this.state = 'pending';    this.value = undefined;    this.reason = undefined;    this.onResolvedCallbacks = [];    this.onRejectedCallbacks = [];    let reso...
【手写Promise】史上最最最详细的手写Promise教程
Anles的博客
05-19 3654
转载自https://yq.aliyun.com/articles/613412 class Promise{ constructor(executor){ this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = []; let resolve = va
手写简易promise
qq_38342645的博客
05-30 77
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-foWiz75E-1685415934109)(/assets/promise/4.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJiq1f3F-1685415934110)(/assets/promise/5.png)]原来的逻辑还是要存在的，但是新的 promise 的 resolve 函数的参数，需要获得现在这一个 then 函数的返回值。
手写一个函数实现简易版的promise(包括resolve,reject,then,catch,finally,all方法的实现)
草莓不爱吃白菜的博客
06-14 330
promise原理
【JavaScript】手写Promise
编码世界
05-15 4709
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
手写简易版的promise
weixin_54217534的博客
06-28 848
Promise是一种抽象异步处理对象，Promise类的构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数如下代码，promise是一个类，所有我们可以用构造函数来进行实现，promise中可以传入一个参数，参数值为一个函数((resolve,reject) => {}),其参数值又可以传入两个参数,参数值为resolve和reject函数,则我们实现的pro
手写一个简单的Promise
u011393161的博客
11-22 3510
今天突发奇想，想自己写个Promise来玩，一说要写还真反应不过来怎么开始，总之先看看Promise是怎么用的好了。 let pp= new Promise((resolve, reject) =&amp;amp;gt; { resolve('done'); }); pp.then((value) =&amp;amp;gt; { console.log(value); }).catch((e)=&amp;amp;gt;{ cons...
手写实现简单的promise
weixin_34348111的博客
04-30 1083
手写promise几乎每家大厂的必备考题，几次面试都被这个问题坑了，于是花了些时间特意研究了一下，下面是promise实现的思考过程。大家如果不嫌弃，还请往下看： promise的介绍 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 例如以下一个promise的例子： con...
手写一个promise
03-20
很高兴为您提供一个手写的 Promise 实现，代码如下： class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onResolvedCallbacks.forEach((fn) => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach((fn) => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value; onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason }; const promise2 = new Promise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.state === 'pending') { this.onResolvedCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return promise2; } static resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } let called = false; if (x instanceof Promise) { x.then((value) => { Promise.resolvePromise(promise2, value, resolve, reject); }, reject); } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call(x, (value) => { if (called) return; called = true; Promise.resolvePromise(promise2, value, resolve, reject); }, (reason) => { if (called) return; called = true; reject(reason); }); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力不熬夜的小喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值