Promise.resolve is not a constructor

时间: 2023-12-10 18:44:13 浏览: 143

JavaScript基础教程之如何实现一个简单的promise

前言我们在开发过程中大多会用到promise，想必大家对promise的使用都很熟练了，今天我们就来实现一个简单的promise，实现的效果如有出入还往指正。 Promise/A+规范：首先重新阅读了下A+的规范: promise代表了一个异步操作的最终结果，主要是通过then方法来注册成功以及失败的情况， Promise/A+历史上说是实现了Promise/A的行为并且考虑了一些不足之处，他并不关心如何创建，完成，拒绝Promise，只考虑提供一个可协作的then方法。术语： promise是一个拥有符合上面的特征的then方法的对象或者方法。 thenable 【JavaScript Promise 基础教程】Promise 是 JavaScript 异步编程的一种解决方案，它代表了一个尚未完成但预期将来完成的异步操作。Promise 的核心在于它的状态管理，它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。状态一旦改变，就不能再次更改，确保了结果的确定性。在实现一个简单的 Promise 时，我们首先要遵循 Promise/A+ 规范。规范要求 Promise 实例有一个 `then` 方法，用于注册成功的回调和失败的回调。`thenable` 是指定义了 `then` 方法的对象或方法，可以与其他 Promise 对象协同工作。下面我们将逐步构建一个简易的 Promise： 1. **构造函数**：我们首先定义一个名为 `MyPromise` 的类，其构造函数接受一个参数 `fn`，这个参数应该是一个函数，用来执行异步操作。在构造函数中，我们初始化状态为 `pending`，并将值设置为 `undefined`。接着，我们将 `resolve` 和 `reject` 方法绑定到传递的函数中，使得它们能在异步操作完成后调用。 ```javascript class MyPromise { constructor(fn) { if (typeof fn !== 'function') { throw new TypeError('MyPromise fn is not a function'); } this.state = 'pending'; this.value = undefined; fn(this.resolve.bind(this), this.reject.bind(this)); } } ``` 2. **resolve 和 reject 方法**：这两个方法用于改变 Promise 的状态。`resolve` 方法将状态从 `pending` 改为 `fulfilled`，并设置 `value` 为传入的值。`reject` 方法将状态从 `pending` 改为 `rejected`，通常会传递一个拒绝原因（reason）。 ```javascript class MyPromise { // ...构造函数 resolve(value) { if (this.state !== 'pending') return; this.state = 'fulfilled'; this.value = value; } reject(reason) { if (this.state !== 'pending') return; this.state = 'rejected'; this.reason = reason; } } ``` 3. **then 方法**： `then` 方法是 Promise 的核心，它接受两个回调函数：一个处理成功的情况，另一个处理失败的情况。我们需要检查 Promise 当前的状态，根据状态来执行相应的回调，并返回一个新的 Promise，以便链式调用。 ```javascript class MyPromise { // ...构造函数和 resolve/reject 方法 then(onFulfilled, onRejected) { const promise2 = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); if (x instanceof MyPromise) x.then(resolve, reject); else resolve(x); } catch (e) { reject(e); } }, 0); } else if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); if (x instanceof MyPromise) x.then(resolve, reject); else resolve(x); } catch (e) { reject(e); } }, 0); } else { // 如果 Promise 仍处于 pending 状态，将 then 注册的回调存入队列，等待状态变化 this.onFulfilledCallbacks.push(() => { try { const x = onFulfilled(this.value); if (x instanceof MyPromise) x.then(resolve, reject); else resolve(x); } catch (e) { reject(e); } }); this.onRejectedCallbacks.push(() => { try { const x = onRejected(this.reason); if (x instanceof MyPromise) x.then(resolve, reject); else resolve(x); } catch (e) { reject(e); } }); } }); return promise2; } } ``` 4. **catch 方法**： `catch` 方法实际上是 `then` 的别名，用于处理错误。它只接受一个失败回调函数。 ```javascript class MyPromise { // ...构造函数、resolve/reject 方法和 then 方法 catch(onRejected) { return this.then(null, onRejected); } } ``` 至此，我们已经实现了一个简单的 Promise。这个简易实现遵循了 Promise/A+ 规范，可以处理基本的异步操作。然而，为了完全符合规范，还需要考虑更多边缘情况，如微任务调度、错误传播、thenable 处理等。在实际应用中，可以使用内置的 `Promise` 类，它提供了更完善的特性和性能优化。

回答: "Promise.resolve is not a constructor"这个错误通常是由于在使用Promise.resolve()时出现了问题。根据引用\[2\]，Promise.resolve()可以用来创建一个已经解决的Promise对象。它可以接受一个普通值或一个Promise对象作为参数，并返回一个新的Promise对象。根据引用\[2\]的示例，以下几种方式都可以创建一个已解决的Promise对象: Promise.resolve(x); new Promise(function(resolve, reject){ resolve(x); }); Promise.resolve().then(function(){ return x; }); Promise.all(\[x\]).then(function(arr){ return arr\[0\]; }); 所以，如果你遇到"Promise.resolve is not a constructor"的错误，可能是因为你没有正确使用Promise.resolve()方法。请确保你的代码中正确使用了Promise.resolve()方法，并且传递了正确的参数。 #### 引用[.reference_title] - *1* [ES6中的Promise](https://blog.csdn.net/malemalele/article/details/120373950)[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^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [从那时起返回值或Promise.resolve有什么区别（）](https://blog.csdn.net/CHCH998/article/details/107978262)[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^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Promise构造函数的Promise.resolve()方法](https://blog.csdn.net/u013565133/article/details/102988362)[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^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文

Promise.resolve is not a constructor

相关推荐

一个有趣而棘手的JavaScript示例列表.zip

inflearn-es6:inflearn.com es6项目部分源代码

class myPromise { constructor(executor) { executor(this.resolve.bind(this),this.reject.bind(this)) } resolve(data) { console.log(data); } reject(data) { console.log(data); } } const promise = new myPromise() promise((resolve,reject) => { resolve('成功') })

understanding-es6.pdf

ES6中Promise的应用与原理深入

javascript promise

new Promise

Promise的源码

混合场景下大规模 GPU 集群构建与实践.pdf

29 螺栓组联接成本优化设计.rar

走向现代化数据分析架构：趋势与挑战.pdf

基于Matlab极化天线和目标之间的信号传输建模 matlab代码.rar

08-1 圆锥齿轮行星机构运动分析.rar

金融大数据存储实践.pdf

(源码)基于SpringCloudAlibaba的系统管理平台.zip

这是来自于的c++考试题目

(源码)基于Python和KissFFT的音频处理系统.zip

PADSLayout 常用封装库 ORCAD 常用原理图元器件库

云原生数据库管控探索和实践.pdf

最新推荐

混合场景下大规模 GPU 集群构建与实践.pdf

平尾装配工作平台运输支撑系统设计与应用

管理建模和仿真的文件

MATLAB遗传算法探索：寻找随机性与确定性的平衡艺术

如何在S7-200 SMART PLC中使用MB_Client指令实现Modbus TCP通信？请详细解释从连接建立到数据交换的完整步骤。

MAX-MIN Ant System：用MATLAB解决旅行商问题

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

【实战指南】MATLAB自适应遗传算法调整：优化流程全掌握

在Spring AOP中，如何实现一个环绕通知并在方法执行前后插入自定义逻辑？

Flutter状态管理新秀：sealed_flutter_bloc包整合seal_unions