返回值为 Promise {<pending>} [[Prototype]] : Promise [[PromiseState]] : "fulfilled" [[PromiseResult]] : null

时间: 2023-10-05 17:07:33 浏览: 212

手写的Promise，需要的自行下载

Promise是JavaScript中的一个核心特性，用于处理异步操作。它为开发者提供了一种更好的方式来组织和管理异步代码，避免了回调地狱的问题。在本文中，我们将深入探讨如何一步步手写Promise，理解其内部机制。 Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise的状态从pending变为fulfilled或rejected时，我们称之为settled。一旦Promise被settle，其状态将不可逆。Promise对象通过then方法注册回调函数来处理这些状态变化。我们需要创建一个构造函数Promise，它接受一个执行器函数executor作为参数。executor函数会立即执行，并接收两个参数，分别是resolve和reject，这两个是用于改变Promise状态的函数。 ```javascript function Promise(executor) { // 创建Promise实例的当前状态 let status = 'pending'; // 创建存放结果的变量 let value = null; // 创建fulfilled和rejected回调队列 let fulfilledQueue = []; let rejectedQueue = []; // 定义resolve和reject函数 function resolve(newValue) { if (status !== 'pending') return; status = 'fulfilled'; value = newValue; // 执行fulfilled队列中的回调 fulfilledQueue.forEach(callback => callback(value)); } function reject(newReason) { if (status !== 'pending') return; status = 'rejected'; value = newReason; // 执行rejected队列中的回调 rejectedQueue.forEach(callback => callback(value)); } // 将resolve和reject传入executor executor(resolve, reject); } ``` 接下来，我们需要实现Promise的then方法，它接收两个回调函数，一个用于处理fulfilled状态，另一个用于处理rejected状态。这些回调会被添加到对应的回调队列中，只有当Promise状态改变时，它们才会被执行。 ```javascript Promise.prototype.then = function(onFulfilled, onRejected) { // 创建一个新的Promise实例，用于链式调用 const newPromise = new Promise((resolve, reject) => { // 检查当前Promise状态 if (this.status === 'fulfilled') { // 如果已成功，执行onFulfilled回调 try { const result = onFulfilled(this.value); // 如果返回值是一个Promise，我们需要处理这个Promise if (result instanceof Promise) { result.then(resolve, reject); } else { resolve(result); } } catch (err) { reject(err); } } else if (this.status === 'rejected') { // 如果已失败，执行onRejected回调 try { const result = onRejected(this.value); if (result instanceof Promise) { result.then(resolve, reject); } else { resolve(result); } } catch (err) { reject(err); } } else { // 如果Promise仍处于pending状态，将回调添加到队列中 this.fulfilledQueue.push(() => { const result = onFulfilled(this.value); if (result instanceof Promise) { result.then(resolve, reject); } else { resolve(result); } }); this.rejectedQueue.push(() => { const result = onRejected(this.value); if (result instanceof Promise) { result.then(resolve, reject); } else { resolve(result); } }); } }); return newPromise; }; ``` 至此，我们已经实现了一个基本的Promise。通过这个手写版本，我们可以更深入地理解Promise的工作原理。在实际应用中，Promise还有很多高级特性，如catch、finally、all、race等，它们都是基于核心的Promise机制来扩展的。为了完全实现这些功能，我们需要继续扩展我们的Promise构造函数和原型方法。这个压缩包文件"Promise"可能包含了更详细的手写Promise实现，包括上述未提到的高级特性的源代码。下载后，你可以仔细研究并实践，这对于提升JavaScript异步编程的理解和技能非常有帮助。通过这样的实践，你可以更好地应对复杂的异步场景，写出更优雅、可维护的代码。

这个返回值 "Promise {<pending>}" 表示返回的是一个处于待定状态的Promise对象。\[\[PromiseState\]\] : "fulfilled" 表示该Promise对象的状态为已实现。\[\[PromiseResult\]\] : null 表示该Promise对象的结果为null。\[1\] 在这个例子中，返回的Promise对象是通过Promise.resolve()方法创建的。这个方法会将参数包装成一个已实现的Promise对象。在这种情况下，参数是null，所以返回的Promise对象的结果为null。\[3\] #### 引用[.reference_title] - *1* *2* [promise的简单使用](https://blog.csdn.net/garyhu1/article/details/70237198)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Promise的使用详解与细节分析](https://blog.csdn.net/weixin_47342392/article/details/126940911)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文

返回值 为 Promise {<pending>} [[Prototype]] : Promise [[PromiseState]] : "fulfilled" [[PromiseResult]] : null

相关推荐

imooc-promise-sample:幕课网Promise入门视频源码（https-源码网

js代码-promise 手写

js代码-实现Promise

js代码-实现一个Promise

MyPractice：练习代码的存储库

手写JS Promise深入解析

浅析JavaScript Promise简易实现原理

JavaScript实践：从函数到DOM操作

【链表与异步编程】：揭秘JavaScript中的链式调用

Jupyter_关于长期序列预测NeurIPS 2021的自耦分解变压器的代码发布.zip

考研公共课历年真题集-最新发布.zip

2006-2023年上市公司资产误定价Misp数据集（4.9万样本，含原始数据、代码及结果，最新）.zip

Jupyter_Book_5_统计至简 鸢尾花书从加减乘除到机器学习上架.zip

Pytorch Keras.zip

100个Origin软件高效使用技巧大全-最新更新.zip

Jupyter_已完结最全面的 OpenCV 笔记咕泡唐宇迪.zip

煤矿感知数据联网接入规范 第2部分：重要设备.pdf

【重磅，更新！】全国2011-2021年各省电子商务数据（销售额等）

KSSJ_CJ15-2023.pdf

最新推荐

Jupyter_关于长期序列预测NeurIPS 2021的自耦分解变压器的代码发布.zip

考研公共课历年真题集-最新发布.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。

返回值为 Promise {<pending>} [[Prototype]] : Promise [[PromiseState]] : "fulfilled" [[PromiseResult]] : null

Jupyter_Book_5_统计至简鸢尾花书从加减乘除到机器学习上架.zip

煤矿感知数据联网接入规范第2部分：重要设备.pdf