首页 > 其他分享 >手写Promise

手写Promise

时间:2023-08-21 10:23:19浏览次数:33  
标签:resolve state promise reject Promise 手写 pending

1.promise是手写异步代码的另一种方式,主要用于解决回调嵌套问题 2.promise提供两个参数resolve(成功时调用的函数),reject(失败时调用的参数),它们是promise内部实现好的函数 3.promise有三种状态,pending 等待,fulfilled成功,rejected失败 4.resolve时,将promise的状态从pending改为fulfilled 5.reject时,将promise的状态从pending改为rejected 6.promise是一个类  

		class Promise {
			//立刻执行
			constructor(executor) {
				this.state = 'pending' // 初始化state为等待状态
				this.value = undefined  //记录成功的值
				this.reason = undefined // 记录失败的值
				// 只有状态为pending的时候才能被改变状态
				// 在new Promise的时候,可以同时调用多个函数,但是只会执行第一个
				let resolve = (value) => {
					if (this.state === 'pending') {
						this.state = 'fulfilled' // 更新状态
					}
					this.value = value ///记录成功信息
					// console.log('将状态改为成功,记录成功的信息')
				}
				let reject = (reason) => {
					if (this.state === 'pending') {
						this.state = 'rejected' // 更新状态
					}
					this.reason = reason //记录失败的信息
					// console.log('将状态改为失败,记录失败的信息')
				}
				//  如果执行executor报错,直接reject
				try {
					executor(resolve, reject)
				} catch {
					reject()
				}
			}
			then(onFulfilled, onRejected) {
				// 成功调用 onFulfilled  失败调用onRejected  根据state来进行区分
				if (this.state === 'fulfilled') {
					onFulfilled(this.value)
				}
				if (this.state === 'rejected') {
					onRejected(this.reason)
				}
			}
		}
		const p = new Promise((resolve, reject) => {
			resolve('成功的传值')
			// reject('失败的传值')
		})
		// 在类中,给原型加一个then方法
		p.then(res => {
			console.log(res)
		})

  

标签:resolve,state,promise,reject,Promise,手写,pending
From: https://www.cnblogs.com/qiuchuanji/p/17645282.html

相关文章

  • 异步编程:promise and future
    本文介绍C++中异步编程相关的基础操作类,以及借鉴promiseandfuture思想解决回调地狱介绍。std::threadandstd::jthreadstd::thread为C++11引入,一个简单的例子如下:classWorkerfinal{public:voidExecute(){std::cout<<__FUNCTION__<<std::endl;}......
  • SyntaxError: /xxxx.vue: Unexpected token, expected “,“,[object Promise]export {
    本地老工程vue2.7.x+webpack4在升级webpack5的时候遇启动和打包报错:SyntaxError:SyntaxError:/xxxxx.vueUnexpectedtoken,expected","(1:8)>1|[objectPromise]|^2|export{render,staticRenderFns}最后才发现是prettier导致的。推荐看......
  • Promise的理解和使用
    一:Promise是什么?(1)Promise是JS中进行异步编程的解决方案备注:旧方案是单纯使用回调函数异步编程包括:fs文件操作、数据库操作、AJAX、定时器......(2)从语法上来说:Promise是一个构造函数(3)从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值二......
  • Html+JavaScript实现手写签名
    前言Hello各位,本葡萄又来啦,今天遇到的场景是这样的:在日常业务流程中,经常需要某一流程环节中相关责任人员进行审批签字,早期许多公司为了省事就直接会把这位负责人的签名以键盘打字(楷体)的形式打印出来,但是这样的坏处就是会导致所有的负责人的签名都是一样的,没有美感,为了解决这个问......
  • 基于LeNet网络的MNIST手写数字训练和识别matlab仿真
    1.算法理论概述      基于LeNet网络的MNIST手写数字训练和识别的实现步骤。首先,我们将介绍MNIST数据集的基本信息和LeNet网络的结构及其原理。然后,我们将详细说明数据预处理、LeNet网络的实现过程和训练过程。最后,我们将展示如何使用训练好的LeNet网络对手写数字进行识别,......
  • 手写raft(二) 实现日志复制
    1.Raft日志复制介绍在上一篇博客中MyRaft实现了leader选举,为接下来实现日志复制功能打下了基础:手写raft(一)实现leader选举日志复制是raft最核心也是最复杂的功能,大体上来说一次正常的raft日志复制大致可以简化为以下几步完成:客户端向raft集群发送一次操作请求(比如kv数......
  • 小程序手写tab切换下边框跟随移动特效
    简单效果就是这样,主要是用到微信的动画和获取元素信息left处理。具体来说就是先给红色的边一个固定位置,等到点击切换下一个按钮的时候,获取到下一个按钮的left信息,然后对红色边框使用translateX动画效果,代码如下:wxml<viewclass="tab"><viewbindtap="changeType"id="a1......
  • vue语法错误 + Promise错误 + js 错误,通过钉钉报警
      一、背景:为了使系统更加稳定,在用户使用期间,若发现异常,可及时应对,采取了“报警机制”。通常“报警机制”分为2种,一种是后端对api监控及自定义监控,出现异常,通过钉钉或邮件的形式通知,第二种是前端对js语法,vue语法,自定义报错进行监控,以此来规范代码质量,保证系统预警二、流程......
  • 关于Promise的超难面试题解读
    让我来看一下题目,如下所示Promise.resolve().then(()=>{ console.log(0); returnPromise.resolve(4); }).then((res)=>{ console.log(res); }); Promise.resolve().then(()=>{ console.log(1); }).then(()=>{ console.log(2); }).t......
  • 手写防抖
     目录前言导语代码部分总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语手写防抖编辑代码......