慢慢来,这次一定能搞懂Promise

news2024/9/29 5:33:26

1.Promise到底是个什么东西?

让我们使用万能console打印一下它的内容。
在这里插入图片描述
根据控制控制台的输出可见Promise 是一个构造函数,本身身上有 all、reject、resolve 这几个方法,原型(prototype)上有 then、catch 等方法。
根据这些前置信息,我们可以简单实现编写代码实现一下Promise构造函数。

function Promise(executor) { //executor执行器
		let self = this
		self.status = 'pending' //初始状态
		self.value = undefined //表示当前成功的值
		self.reason = undefined //表示是失败的值
		function resolve(value) { //成功的方法
			if (self.status === 'pending') {
				self.status = 'resolved'
				self.value = value
			}
		}
		function reject(reason) {//失败的方法
			if (self.status === 'pending') {
				self.status = 'rejected'
				self.reason = reason
			}
		}
		executor(resolve, reject)
	}
 
	Promise.prototype.then = function (onFufiled, onRejected) {
		let self = this
		if (self.status === 'resolved') {
			if (onFufiled) {
				onFufiled(self.value)
				return self //为了能链式调用catch 所以then方法下执行传入的回调函数 返回this
			} else {
				return self
			}
		}
		if (self.status === 'rejected') {
			if (onRejected) {
				onRejected(self.reason)
				return self
			} else {
				return self
			}
		}
	}
	Promise.prototype.catch = function (onRejected) {
		let self = this
		if (self.status === 'rejected') {
			if (onRejected) {
				onRejected(self.reason)
			} else {
				return
			}
		} else {
			return
		}
	}

2.实现什么效果

Promise 将异步操作队列化,按照期望的顺序执行,返回符合预期的结果。可以通过链式调用多个 Promise 达到我们的目的。

3.如何使用

//1.promise 没有调用 resolve 或 reject 更改状态时,状态为 pending
const promise = new Promise((resolve, reject) => {
});

//2.resolve 指已经解决,将 promise 状态设置为fulfilled
const promise = new Promise((resolve, reject) => {
resolve("成功");
})
promise.then((msg) => console.log(msg) )

//3.reject 指拒绝处理,将 promise 状态设置为rejected
const promise = new Promise((resolve, reject) => {
reject("失败");
})
promise.then(err => console.log(err) )

//4.promise 传向 then 的传递值,如果 then 没有可处理函数,会一直向后传递
let p1 = new Promise((resolve, reject) => {
	reject("rejected");
}).then().then(null,f => console.log(f) );

//5.每次的 then 都是一个全新的 promise,默认 then 返回的 promise 状态是 fulfilled
let promise = new Promise((resolve, reject) => {
  resolve("fulfilled");
}).then(resolve => {
  console.log(resolve);//fulfilled
})
.then(resolve => {
  console.log(resolve);//undifind
});

4.一些个人理解

Promise确实是可以链式传递参数,但是感觉不是很有必要。主要应用的场景应该还是对网络请求(异步调用)进行执行顺序的控制。比如先进行个人身份认证,再进行登录操作。我这里只是针对自己的需求对Promise进行了一个简单的梳理,更多详情点击查看。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/853076.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JVM源码剖析之Java命令行参数全解

最近,有一位网友询问关于Java命令行参数方面的问题,因为在Java中参数有很多种,有不少的读者一直没弄明白,所以特意写下此篇文章。 此篇文章分2大块,第一块是不同参数的解释,第2块就是JVM源码论证&#xff…

理解 Python 的 for 循环

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 在本篇博客中,我们将讨论 Python 中 for 循环的原理。 我们将从一组基本例子和它的语法开始,还将讨论与 for 循环关联的 else 代码块的用处。 然后我们将介绍迭代对象、迭代器和迭代器协议&…

低代码平台——减少开发bug,解放程序员

目录 一、前言 二、低代码提供了哪些功能 三、低代码对程序员的好处 四、小结 一、前言 在计算机语言的世界里,一直存在着一个千奇百怪的生物——bug。bug产生的本质是因为写代码,于是一种真理就诞生了。真理如下:只要写代码,就会…

【多维定向滤波器组和表面波】表面变换:用于高效表示多维 s 的多分辨率变换(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

信创麒麟操作系统卸载docker,并分别用在线、yum、rpm三种方式安装信创的docker

备注:操作前建议对机器打快照备份,或者备份好数据,如未使用,第一次部署的情况可直接操作 一、卸载DataEase自带的docker # 停止服务 service dataease stop# 删除 docker 可执行文件 rm -f /usr/bin/containerd-shim-runc-v2 r…

快速解决IDEA中类的图标变成J,不是C的情况

有时候导入新的项目后,会出现如下情况,类的图标变成J,如图: 直接上解决方法: 找到项目的pom.xml,右键,在靠近最下方的位置找到Add as Maven Project,点击即可。 此时,一般类的图标就…

【springboot项目】在idea中启动报错合集

一、IDEA中报错 “Error running ‘Application‘: Command line is too long.“ 的解决办法 报错详情: Error running Application: Command line is too long.Shorten command line for Application or also for Spring Boot default configuration.报错原因&am…

校对软件助力公安公检:提高调查报告质量

校对软件可以为公安公检机关提供有力支持,帮助提高调查报告的质量。以下是校对软件在这方面的助力: 1.拼写和语法检查:校对软件可以自动检查调查报告中的拼写错误和语法问题。这可以避免由于疏忽或拼写错误而导致的报告不准确或难以理解的情况…

TENNECO EDI 项目——X12与XML之间的转换

近期为了帮助广大用户更好地使用 EDI 系统,我们根据以往的项目实施经验,将成熟的 EDI 项目进行开源。用户安装好知行之桥EDI系统之后,只需要下载我们整理好的示例代码,并放置在知行之桥指定的工作区中,即可开始使用。 …

java Spring Boot yml多环境配置

我们项目 线上和线下 环境配置不是特别一样 例如 运行的URL 数据库地址 数据库的账号密码 这些经常是不一样的 如果每次上线钱改 也不是特别方便 甚至可能忘记 那么 进入我们代码中 所谓的多环境 就是在不同的环境下配置不同的值 终端还是在application配置文件中 多环境的话…

【网络编程】万字详解||一个简单TCP服务器(TCP、线程池、守护进程)源码+介绍

TCP服务器 锁:Lock.hpp代码介绍 守护进程:daemonize.hpp代码说明 日志文件:log.hpp代码说明 任务处理 Task.hpp代码说明 线程池 ThreadPool.hpp代码说明 客户端 TCPClient.cc代码说明 服务器 TCPServer.cc代码说明 头文件包 util.hpp代码 Mak…

【工程实践】使用Roformer-sim(SimBERTv2 )做数据增强

前言 此文仅记录以Roformer-sim为基础模型做数据增强的过程,Roformer-sim模型细节请移步:SimBERTv2来了!融合检索和生成的RoFormer-Sim模型 - 科学空间|Scientific Spaces https://github.com/ZhuiyiTechnology/roformer-sim 1.功能介绍 可以…

[LeetCode - Python]344.反转字符串(Easy);345. 反转字符串中的元音字母(Easy);977. 有序数组的平方(Easy)

1.题目 344.反转字符串(Easy) 1.代码 class Solution:def reverseString(self, s: List[str]) -> None:"""Do not return anything, modify s in-place instead."""# 双指针left,right 0, len(s)-1while left < right:temp s[left]s[…

利用PCL实现点云配准

一、介绍 This document demonstrates using the Iterative Closest Point algorithm in your code which can determine if one PointCloud is just a rigid transformation of another by minimizing the distances between the points of two pointclouds and rigidly tran…

Ishikawa

Ishikawa 石川、鱼骨头、因果 其实我压根不知道 Ishikawa 这个日文就是石川&#xff0c;^_^&#xff0c;视乎也没啥影响

fastadmin动态获取单选框选中值修改页面

需求场景&#xff1a; 在编辑页面中&#xff0c;要求要根据某一单选框&#xff08;字段名称popup&#xff09;的选中值&#xff0c;来动态显示或者隐藏某个div&#xff08;idupload_img&#xff09;。 edit: function () {var popVal $("input[typeradio][namerow[popup]…

CNN(四):ResNet与DenseNet结合--DPN

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 前面实现了ResNet和DenseNet的算法&#xff0c;了解了它们有各自的特点&#xff1a; ResNet&#xff1a;通过建立前面层与后面层之间的“短路…

U8g2 驱动oled自定义中文字库

原文&#xff1a;Arduino驱动LED128X64 - U8g2 参考&#xff1a; Arduino通过u8g2库驱动OLED适合 u8g2 的中文字体&#xff0c;采用文泉驿点阵宋体作为源本&#xff0c;提供 12x12、13x13、14x14、15x15 和 16x16 点阵字库。 本文所需工具下载 我们在项目中大概率会遇到LED显示…

淘宝商品详情(API接口)各大请求示例参考参数

主图&#xff0c;标题&#xff0c;价格&#xff0c;销量&#xff0c;库存&#xff0c;sku&#xff0c;详情信息&#xff0c;促销价&#xff0c;优惠券信息&#xff0c;券后价等 请求示例&#xff1a; <?php// 请求示例 url 默认请求参数已经URL编码处理 // 本示例代码未加…

一文走进时序数据库性能测试工具 TSBS

一、背景 在物联网、车联网等时序数据场景中&#xff0c;数据的高速写入能力至关重要&#xff0c;会对产品方案的可用性、可靠性和扩展性产生影响。 以物联网为例&#xff0c;当面临千万甚至上亿设备、平均每个设备采集几十个到几百个指标时&#xff0c;每秒生成的数据将达到…