【JS】浅谈Promise

news2024/9/25 21:29:36

Promise

  • 前言
  • 一、Promise是什么?
  • 二、为什么用Promise?
    • 2.1解决回调地狱
    • 2.2 集中错误处理
    • 2.3代码解耦和复用
  • 三、做什么?
  • 四、原型方法和实例方法?
  • 五、应用场景?


前言

promise是es6的新规范,它是一种异步解决方案,主要为了解决回调地狱问题。
在这里插入图片描述

一、Promise是什么?

Promise是异步编程的一种解决方案,可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果。

Promise对象有三个状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

  • 对象的状态不受外界影响,只有异步操作的结果,可以决定当前是哪一种状态
  • 一旦状态改变(从pending变为fulfilled和从pending变为rejected),就不会再变,任何时候都可以得到这个结果

二、为什么用Promise?

Promise是异步方案,主要用来处理异步操作。

2.1解决回调地狱

我们写项目经常会遇到一个方法中如果成功了,会接着执行下一个逻辑,很多时候层层嵌套,导致后续维护要阅读很长很长的代码。而用Promise封装后,后续可以复用并且不影响其他逻辑。

例如我有一个上传图片,需要我不停在图片上添加东西的功能

upLoadImg(path,name,function(data) {
	//加个地址
	upLoadImg(path1,name,function(data) {
		//加个时间
		upLoadImg(path2,name,function(data) {
		})
	})
});
function fn(data){
	//...
	return data1;
}
function upLoadImg(path,name){
	return new Promise((resolve, reject) => {  
	//...上传操作
	//成功
	let result = fn(data);
	resolve(result)
	//失败
	reject()
	}
}
upLoadImg('path','name') .then(data1 => {  
        return upLoadImg('path1', 'name1'); // 返回下一个Promise  
}).then(data2 => {  
        return upLoadImg('path2', 'name2'); // 返回下一个Promise  
}).catch(err => {  
        console.error( err);  
}); 

2.2 集中错误处理

而Promise通过catch方法提供了集中的错误处理机制,无论异步操作在链式调用的哪个环节失败,都可以在catch方法中统一处理。

2.3代码解耦和复用

通过将异步操作封装在Promise对象中,我们可以将异步逻辑与业务逻辑解耦,使得代码更加模块化和可复用。
比如上述拍照功能,还有常见的封装get和post请求
例如小程序我会调用手机相机进行拍照或者选择相册进行上传操作

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		//...业务逻辑
	}
});

这个业务逻辑有时候会让代码变得很长很长,试着改写一下

return new Promise((reslove, reject) => {
	uni.chooseImage({
		count: 6, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
		sourceType: ['album'], //从相册选择
		success: function (res) {
			reslove(res);
		}fail: () => {
			reject();
		}
	});

而我们用到的时候,直接 await 这个方法,进行接下来的逻辑。

三、做什么?

  • 封装异步操作

  • 链式调用:Promise的then方法返回一个新的Promise,可以链式地调用多个异步操作,并处理它们的结果。

  • 错误处理:Promise提供了catch方法来处理异步操作中可能发生的错误。

  • 状态管理:Promise对象具有三种状态:pending(等待中)、fulfilled(已成功)和rejected(已失败)。一旦Promise的状态从pending变为fulfilled或rejected,这个状态就不会再改变。

  • 组合异步操作:Promise提供了Promise.all、Promise.race等静态方法来组合多个异步操作。

四、原型方法和实例方法?

在这里插入图片描述

五、应用场景?

异步操作场景

  • 封装网络请求
  • 定时操作
  • 链式异步操作

在这里插入图片描述

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

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

相关文章

【漏洞复现】6.Struts2 S2-061 远程命令执行漏洞(CVE-2020-17530)复现与分析

文章目录 1. 预备知识2. 漏洞复现2.1 漏洞介绍2.2 漏洞原理分析2.2.1 Apache Struts2架构2.2.2 OGNL语法介绍2.2.3漏洞原理 2.3 漏洞复现2.3.1 靶场搭建2.3.2 漏洞探测2.3.3 漏洞利用2.3.4 POC分析 2.4 漏洞修复 1. 预备知识 Struts是一个用于开发Java EE网络应用程序的开放源代…

2024年03月 Discourse 3.3.0.beta1 版本的更新

在这个版本的更新中 Discourse 完成了 Ember 5 版本的升级和更新。 Ember.js是一个用于创建 web 应用的 开源JavaScript MVC 框架,采用基于字符串的Handlebars 模板,支持双向绑定、观察者模式、计算属性(依赖其他属性动态变化)、…

扩展以太网(数据链路层)

目录 一、在物理层扩展以太网 二、在数据链路层扩展以太网 三、以太网交换机的特点 四、以太网交换机的交换方式 五、以太网交换机的自学习功能 六、小结 一、在物理层扩展以太网 使用光纤扩展: • 主机使用光纤(通常是一对光纤)和…

C语言基础知识点(十八)联合、

【C语言】联合体-共用体 (union) 详解-阿里云开发者社区 (aliyun.com) 联合 在C语言中是一种数据类型,能在同一个内存空间中存储不同的数据类型(不是同时储存)。 典型用法:设计一种表以存储及无规律、实…

Redis相关操作大全一篇全搞定

Redis是单线程吗? Redis 的单线程主要是指 Redis 的网络 10 和键值对读写是由一个线程来完成的,这也是 Redis 对外提供键值存储服务的主要流程。但Redis 的其他功能,比如持久化、异步删除、集群数据同步等,其实是由额外的线程执行的。 Redi…

【java】java环境变量分类

测试代码&#xff1a; public class TestSys {public static void main(String[] args) {/*** 获取所有的系统环境变量*/Map<String, String> map System.getenv();map.forEach((key, value) -> System.out.printf("env&#xff1a;key:%s->value:%s%n"…

Linux系统部署SQL Server结合内网穿透实现公网访问本地数据库

文章目录 前言1. 安装sql server2. 局域网测试连接3. 安装cpolar内网穿透4. 将sqlserver映射到公网5. 公网远程连接6.固定连接公网地址7.使用固定公网地址连接 前言 简单几步实现在Linux centos环境下安装部署sql server数据库&#xff0c;并结合cpolar内网穿透工具&#xff0…

GAT精译 - 1

2 GAT ARCHITECTURE 我们将描述一个单独的图注意力层&#xff0c;因为单层在我们实验中GAT架构。我们使用这个特殊的注意力是follow Bahdanau et al 2015的工作。 我们层的输入是节点的特征&#xff0c;&#xff0c;,N是节点的数量&#xff0c;F是每一个节点的特征数量。这个层…

STM32定时器不按设定超时产生中断

1. 引言 某客户设计需要启动定时器在 3ms 后产生中断&#xff0c;其后定时器不再运行&#xff0c;直至下一次软件要求再次启动定时器产生中断&#xff0c;实测代码后发现定时器启动后立即产生了超时中断。 2. 调研 客户通过 STM32CubeMX 配置 TIM7 并生成工程&#xff0c;在…

外包干了15天,技术退步明显。。。。。。

说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&a…

基于python+vue智慧农业小程序flask-django-php-nodejs

传统智慧农业采取了人工的管理方法&#xff0c;但这种管理方法存在着许多弊端&#xff0c;比如效率低下、安全性低以及信息传输的不准确等&#xff0c;同时由于智慧农业中会形成众多的个人文档和信息系统数据&#xff0c;通过人工方法对知识科普、土壤信息、水质信息、购物商城…

PrimeTime 工具学习笔记(4)

脚本书写。主要是tcl脚本的基本语法。可以看我的这个专栏&#xff1a; Tcl & STA_在路上-正出发的博客-CSDN博客

CSS样式表 样式优先级 选择器以及选择器的权重优先级

CSS组成 css由选择符和声明组成&#xff0c;声明又分为属性和属性值 属性必须放在花括号里面&#xff0c;属性与属性值必用冒号连接 每条声明用分号结束 当一个属性有多个属性值的时候&#xff0c;属性值与属性值部分先后顺序&#xff0c;用空格隔开 在书写样式过程中、空格、换…

python课后习题一

题目&#xff1a; 1. 2. 解题过程&#xff1a; 1. """计算年数和天数""" minute int(input("请输入分钟数&#xff1a;")) hours minute // 60 days hours // 24 years days // 365 last_days days % 365 print(f"{minut…

uniapp_微信小程序客服

一、调用api 二、代码 <button open-type"contact">客服</button> 三、小程序后台添加客服人员就行

最新版puppeteer 在linux下的安装教程

最新版的 puppeteer 在安装的时候&#xff0c;Chromium不会自动下载&#xff0c;导致安装失败 这个时候需要跳过Chromium的安装&#xff0c;然后手动下载Chromium并安装。 1、先设置npm跳过Chromium下载 export PUPPETEER_SKIP_DOWNLOADtrue 2、安装puppeteer npm i pup…

深度解读UUID:结构、原理以及生成机制

What 是 UUID UUID (Universally Unique IDentifier) 通用唯一识别码 &#xff0c;也称为 GUID (Globally Unique IDentifier) 全球唯一标识符。 UUID是一个长度为128位的标志符&#xff0c;能够在时间和空间上确保其唯一性。UUID最初应用于Apollo网络计算系统&#xff0c;随后…

vue使用element-ui 实现自定义分页

element-ui文档截图&#xff0c;plus大同小异。 可以通过插槽实现自定义的分页。在layout里面进行配置。 全部代码 //page.js export default {name:Cuspage,props:{total:Number,},data(){return {currentPage:1,pageSize:10,}}methods: {setslot (h) {return(<div cla…

Navicat Premium 15 Mac中文激活:数据库开发工具

Navicat Premium 15 for Mac是一款功能强大的数据库管理和开发工具&#xff0c;专为Mac用户打造。它支持多种数据库系统&#xff0c;如MySQL、MariaDB、SQL Server、Oracle、PostgreSQL等&#xff0c;为数据库管理员和开发人员提供了全面的解决方案。 软件下载&#xff1a;Navi…

ElasticSearch - 基本操作

前言 本文记录 ES 的一些基本操作&#xff0c;就是对官方文档的一些整理&#xff0c;按自己的习惯重新排版&#xff0c;凑合着看。官方的更详细&#xff0c;建议看官方的。 下文以 books 为索引名举例。 新增 添加单个文档 (没有索引会自动创建) POST books/_doc {"n…