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 提供…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西,但是如果把三者放在一起,它们之间到底什么关系?又有什么联系呢?我不是很明白!!! 就比如说: 沙箱&#…...
云安全与网络安全:核心区别与协同作用解析
在数字化转型的浪潮中,云安全与网络安全作为信息安全的两大支柱,常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异,并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全:聚焦于保…...
