Promise应用
创建一个 Promise 对象
let promise = showLabelText() {return new Promise((resolve, reject) => {axios({method: "post",url: "/code/expose/interface/queryActionPlan",data: { situationOneId: '19999', labels: ['1', '2', '3'] }}).then(response => {this.labelTextData = response.data;resolve(response.data); // 请求成功后解析Promise}).catch(error => {reject(error); // 请求失败后拒绝Promise})});
}// 处理 Promise 的成功情况
promise.then(result => {console.log("成功:", result);
}).catch(error => {console.log("失败:", error);
}).finally(() => {console.log('无论成功或失败,finally 语句块都会执行');
})
在上述示例中,我们创建了一个Promise对象,并在其回调函数中进行异步操作。根据条件判断,决定是调用resolve方法还是reject方法。
如果异步操作成功,我们调用resolve方法并传递成功的结果。然后,可以使用.then方法来处理Promise的成功情况,接收并处理成功的结果。
如果异步操作失败,我们调用reject方法并传递失败的原因。然后,可以使用.catch方法来处理Promise的失败情况,接收并处理失败的原因。
通过这种方式,我们可以使用Promise对象来处理异步操作的结果,并以链式的方式进行成功和失败的处理。
Promise 常用方法:
.then()方法:用于注册成功的处理程序。可以链式调用多个.then()方法来处理Promise的成功结果。
.catch()方法:用于注册失败的处理程序。通常在链式调用的最后使用,以捕获和处理Promise的失败情况。
// 假设我们有一个函数,用于从服务器获取用户信息
function fetchUserInfo(orgCode) {return new Promise((resolve, reject) => {// 假设这是异步获取用户信息的操作axios({method: "post",url: "/getUserInfo",data: { orgCode: orgCode }}).then(response => {resolve(response.data); // 请求成功后解析Promise})});
}// 假设我们有另一个函数,用于从服务器获取用户订单
function fetchUserOrders(userInfo) {return new Promise((resolve, reject) => {// 假设这是异步获取用户订单的操作axios({method: "post",url: "/getUserOrders",data: { userInfo: userInfo }}).then(response => {resolve(response.data); // 请求成功后解析Promise})});
}// 假设我们有最后一个函数,用于发送邮件给用户
function sendEmailToUser(userInfo, orders) {return new Promise((resolve, reject) => {// 假设这是异步发送邮件的操作axios({method: "post",url: "/sendEmail",data: { userInfo: userInfo,orders:orders }}).then(response => {resolve(response.data); // 请求成功后解析Promise})});
}// 使用 Promise 链式调用来处理异步操作
fetchUserInfo(123) // 获取用户信息.then(userInfo => {console.log('用户信息:', userInfo);return fetchUserOrders(userInfo); // 获取用户订单}).then(orders => {console.log('用户订单:', orders);return sendEmailToUser(userInfo, orders); // 发送邮件给用户}).then(result => {console.log('最终结果:', result);}).catch(error => {console.error('发生错误:', error);});
.all()方法:用于处理多个Promise对象的并发执行,并等待所有Promise都完成。
.race()方法:用于处理多个Promise对象的竞争执行,只等待第一个完成的Promise。
let promises = [new Promise((resolve, reject) => {// 异步操作 1setTimeout(() => {resolve("结果 1");}, 1000);}),new Promise((resolve, reject) => {// 异步操作 2setTimeout(() => {resolve("结果 2");}, 2000);}),new Promise((resolve, reject) => {// 异步操作 3setTimeout(() => {resolve("结果 3");}, 3000);})
];try {// 使用 Promise.all 等待所有异步操作完成const results = Promise.all(promises).then(results => {console.log("所有异步操作完成:", results);// 输出: [ '结果 1', '结果 2', '结果 3' ]})
} catch (error) {console.error("Error fetching data:", error);
}
Promise.race([promise1, promise2]).then(result => {console.log("第一个完成的 Promise 的结果:", result);// 输出: 结果 1 或 结果 2,具体取决于哪个 Promise 先完成
});
async/await
async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。
让我们以 async 这个关键字开始。在函数前面的 “async” 这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。
例如,下面这个函数返回一个结果为 1 的 resolved promis:
async function f() {return 1;
}f().then(alert); // 1
我们也可以显式地返回一个 promise,结果是一样的:
async function f() {return Promise.resolve(1);
}f().then(alert); // 1
所以说,async 确保了函数返回一个 promise,也会将非 promise 的值包装进去
还有另外一个叫 await 的关键词,它只在 async 函数内工作。
// 只在 async 函数内工作
let value = await promise;
关键字 await 让 JavaScript 引擎等待直到 promise 完成(settle)并返回结果。
这里的例子就是一个 1 秒后 resolve 的 promise:
async function f() {let promise = new Promise((resolve, reject) => {setTimeout(() => resolve("done!"), 1000)});let result = await promise; // 等待,直到 promise resolve (*)alert(result); // "done!"
}f();
这个函数在执行的时候,“暂停”在了 (*) 那一行,并在 promise settle 时,拿到 result 作为结果继续往下执行。所以上面这段代码在一秒后显示 “done!”。
让我们强调一下:await 实际上会暂停函数的执行,直到 promise 状态变为 settled,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为 JavaScript 引擎可以同时处理其他任务:执行其他脚本,处理事件等。
相比于 promise.then,它只是获取 promise 的结果的一个更优雅的语法。并且也更易于读写。
注意:
不能在普通函数中使用 await
如果我们尝试在非 async 函数中使用 await,则会报语法错误:
总结
函数前面的关键字 async 有两个作用:
让这个函数总是返回一个 promise。
允许在该函数内使用 await。
Promise 前的关键字 await 使 JavaScript 引擎等待该 promise settle,然后:
如果有 error,就会抛出异常 —— 就像那里调用了 throw error 一样。
否则,就返回结果。
这两个关键字一起提供了一个很好的用来编写异步代码的框架,这种代码易于阅读也易于编写。
有了 async/await 之后,我们就几乎不需要使用 promise.then/catch,但是不要忘了它们是基于 promise 的,因为有些时候(例如在最外层作用域)我们不得不使用这些方法。并且,当我们需要同时等待需要任务时,Promise.all 是很好用的。
相关文章:
Promise应用
创建一个 Promise 对象 let promise showLabelText() {return new Promise((resolve, reject) > {axios({method: "post",url: "/code/expose/interface/queryActionPlan",data: { situationOneId: 19999, labels: [1, 2, 3] }}).then(response > {…...
51单片机嵌入式开发:13、STC89C52RC 之 RS232与电脑通讯
STC89C52RC 之 RS232与电脑通讯 第十三节课,RS232与电脑通讯1 概述2 Uart介绍2.1 概述2.2 STC89C52UART介绍2.3 STC89C52 UART寄存器介绍2.4 STC89C52 UART操作 3 C51 UART总结 第十三节课,RS232与电脑通讯 1 概述 RS232(Recommended Stand…...
当代政治制度(练习题)
当代政治制度(练习题) Rz整理 仅供参考 干部鉴定必须坚持德才兼备原则,考核内容包括(A.德 B.廉 C.能 D.勤 F.绩 ) A.德 B.廉 C.能 D.勤 E.信 F.绩我国干部任用的方式主要包括(A.考任 C.委任 D.聘任 F.选任…...
前端pc和小程序接入快递100(跳转方式和api方式)====实时查询接口
文章目录 跳转方式微信小程序(我以uniapp为例)pc api接入说明关于签名计算成功示例 跳转方式 没有任何开发成本,直接一键接入 可以直接看官方文档 https://www.kuaidi100.com/openapi/api_wxmp.shtml 微信小程序(我以uniapp为例…...
电脑永久性不小心删除了东西还可以恢复吗 电脑提示永久性删除文件怎么找回 怎么恢复电脑永久删除的数据
永久删除电脑数据的操作,对于很多常用电脑设备的用户来说,可以说时有发生!但是,因为这些情况大都发生在不经意间,所以每每让广大用户感觉到十分苦恼。永久删除也有后悔药,轻松找回电脑中误删的文件。恢复文…...
LeetCode热题100刷题16:74. 搜索二维矩阵、33. 搜索旋转排序数组、153. 寻找旋转排序数组中的最小值、98. 验证二叉搜索树
74. 搜索二维矩阵 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int row matrix.size();int col matrix[0].size();for(int i0;i<row;i) {//先排除一下不存在的情况if(i>0&&matrix[i][0]>target…...
C++仿函数
在C中,我们经常需要对类中的元素进行比较,例如在排序、查找等操作中。为了使类更加灵活,我们可以通过自定义比较函数来实现不同的比较方式。在本文中,我们将探讨如何在类中使用仿函数和 Lambda 表达式来定义自定义比较函数。 1. …...
文献阅读:tidyomics 生态系统:增强组学数据分析
文献介绍 文献题目: The tidyomics ecosystem: enhancing omic data analyses 研究团队: Stefano Mangiola(澳大利亚沃尔特和伊丽莎霍尔医学研究所)、Michael I. Love(美国北卡罗来纳大学教堂山分校)、Ant…...
MySQL运维实战之Clone插件(10.1)使用Clone插件
作者:俊达 clone插件介绍 mysql 8.0.17版本引入了clone插件。使用clone插件可以对本地l或远程的mysql实例进行clone操作。clone插件会拷贝innodb存储引擎表,clone得到的是原数据库的一个一致性的快照,可以使用该快照数据来启动新的实例。cl…...
【系统架构设计】数据库系统(三)
数据库系统(三) 数据库模式与范式数据库设计备份与恢复分布式数据库系统分布式数据库的概念特点分类目标 分布式数据库的架构分布式数据库系统与并行数据库系统 数据仓库数据挖掘NoSQL大数据 数据库模式与范式 数据库设计 备份与恢复 分布式数据库系统…...
免费视频批量横版转竖版
简介 视频处理器 v1.3 是一款由是貔貅呀开发的视频编辑和处理工具,提供高效便捷的视频批量横转竖,主要功能: 导入与删除文件:轻松导入多个视频文件,删除不必要的文件。暂停与继续处理:随时暂停和继续处理。…...
内存管理(知识点)
c语言与c对于内存管理的区别 c语言中动态内存管理方式 malloc\calloc\realloc\free c内存管理方式 c兼容c语言所以c语言中的方式也可以使用 但是用起来太麻烦 所以通过new和delete操作符竞选动态内存管理 单个对象 c语言: int* p2(int*)malloc(sizeof(int)) c : int*p3 new…...
【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel
持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel 简介熔断降级什么是熔断什么是降级相同点不同点 整合Sentinel自定义sentinel流控返回数据使用Sentinel来保护feign远程调用自定义资源给网关整合Sentinel参考 简介 熔断降…...
防范UDP Flood攻击的策略与实践
UDP Flood攻击是一种常见的分布式拒绝服务(DDoS)攻击手段,通过向目标服务器发送大量无效的UDP数据包,消耗其网络带宽和处理资源,最终导致合法的网络服务无法正常运行。本文将深入探讨UDP Flood攻击的原理、常见的防御策…...
昇思25天学习打卡营第17天 | CycleGAN图像风格迁移互换
通过深入学习CycleGAN模型,我对无监督图像到图像的转换技术有了更深的理解。CycleGAN不仅能在没有成对训练样本的情况下实现域之间的转换,而且在保持内容结构的同时成功转换图像风格,这在许多应用中都非常有用,如艺术风格转换、季…...
Leetcode 2520. 统计能整除数字的位数
问题描述: 给你一个整数 num ,返回 num 中能整除 num 的数位的数目。 如果满足 nums % val 0 ,则认为整数 val 可以整除 nums 。 示例 1: 输入:num 7 输出:1 解释:7 被自己整除࿰…...
WEB前端08-综合案例(动态表格)
使用 HTML、CSS 和 JavaScript 创建动态表格 在本教程中,我们将创建一个动态表格,允许用户添加行、选择项目,并执行批量操作,如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分…...
【面试题】Redo log和Undo log
Redo log 介绍Redo log之前我们需要了解一下,mysql数据操作的流程: 上述就是数据操作的流程图,可以发现sql语句并不是直接操作的磁盘而是通过操作内存,然后进行内存到磁盘的一个同步。这里我们必须要了解一些区域: 缓…...
开发实战经验分享:互联网医院系统源码与在线问诊APP搭建
作为一名软件开发者,笔者有幸参与了多个互联网医院系统的开发项目,并在此过程中积累了丰富的实战经验。本文将结合我的开发经验,分享互联网医院系统源码的设计与在线问诊APP的搭建过程。 一、需求分析 在开发任何系统之前,首先要…...
springboot系列教程(十六):配置Actuator组件,实现系统监控
一、Actuator简介 1、监控组件作用 在生产环境中,需要实时或定期监控服务的可用性。Spring Boot的actuator(健康监控)功能提供了很多监控所需的接口,可以对应用系统进行配置查看、相关功能统计等。 2、监控分类 Actuator 提供…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
