JS中Promise用法(简要说明)

news2024/11/15 11:14:49

文章目录

  • 1、下方自定义名词约定
  • 2、官方流程图
  • 3、构造函数Promise + <状态>fulfilled 用法
    • 代码
    • 图示
  • 4、构造函数Promise + <状态>rejected 用法
    • 代码
    • 图示
  • 5、第3和4结合使用,可以将promise状态settled为2种情况之一
    • 代码
    • 图示(图中if和else都是调用positive不太对,以代码为准)
  • 6、then的用法
    • 代码
    • 图示
    • 7、catch的用法
    • 概括
    • 代码
  • 8、all的用法
    • 概括
    • 代码
  • 9、race() //竞态
    • 概括
    • 代码

1、下方自定义名词约定

  • IIFE:立即执行函数
  • positive: 正向结果接收函数(resolve),异步回调后用这个函数接收数据并改变promise状态
  • data: 正向数据
  • negative: 负向结果接收函数(reject),异步回调后用这个函数接收原因并改变promise状态
  • reason: 负向原因

2、官方流程图

在这里插入图片描述

3、构造函数Promise + <状态>fulfilled 用法

代码

//抽象伪代码例子
new Promise( IIFE(positive, negative){ positive(data) } )
//具体例子
let testP = new Promise(function(positive, negative){
    setTimeout(()=>{
        positive("success.");
        console.log(`延迟执行完毕,用positive设置正向结果,并改变promise的状态`);
    }, 5000);
});

图示

在这里插入图片描述

4、构造函数Promise + <状态>rejected 用法

代码

//抽象伪代码例子
new Promise( IIFE(positive, negative){ negative(reason) } )
//具体例子
let testFail = new Promise(function(positive, negative){
    setTimeout(()=>{
        negative("failure.");
        console.log(`延迟执行完毕,异步回调后用negative这个函数接收原因并改变promise状态`);
    }, 5000);
});

图示

在这里插入图片描述

5、第3和4结合使用,可以将promise状态settled为2种情况之一

代码

// 下方的 xxx 每次执行都要用一个新变量接收新的结果
let xxx = new Promise(function(positive, negative){
    setTimeout(()=>{
        let rst = Math.floor(Math.random()*100);
        if(rst%2==0){
            positive(`偶数=>${rst}`);
        }else{
            negative(`奇数=>${rst}`); //注意,下方图示调用错误,总是fulfilled态;以运行这个最新代码为准
        }
    }, 5000);
});

图示(图中if和else都是调用positive不太对,以代码为准)

在这里插入图片描述
在这里插入图片描述

6、then的用法

代码

new Promise(function(positive, negative){
    // setTimeout(()=>{
        let rst = Math.floor(Math.random()*100);
        if(rst%2==0){
            positive(`偶数=>${rst}`);
        }else{
            negative(`奇数=>${rst}`);
        }
    // }, 0);
})
.then(
(data)=>{
    console.log(`then的第一个参数函数,接收正向结果=>${data}`);
},
(reason)=>{
    console.log(`then的第二个参数函数,接收负向原因=>${reason}`);
});

图示

触发对应的处理函数

在这里插入图片描述

7、catch的用法

概括

  1. catch等价于then的第2个处理函数,当then没有第2个处理函数时
  2. catch还等价于try catch,当then第1个处理函数运行出错时

代码

//catch是和promise对象的then函数并行的函数
//catch顾名思义,类似try{}catch(e){},用来捕获异常的(promise的catch能捕获2种情况《1、没有then的第2个函数参数时|||2、then的第1个函数参数运行出错时)》如下)

//1、当then函数没有第二个参数(用来处理negative原因的函数),catch能够捕获到并处理【等价于then的第2个函数参数,在then没有第2个参数时】
new Promise((positive, negative)=>{
    negative("负向原因。")
})
.then(
    (data)=>{ console.log("上面是negative,不会进到这里" + data) }
    // (reason)=>{ console.log("上面是negative,会进来" + reason + "但是我注释掉了,所以这里没处理到。") }
)
.catch( //控制台输出:   捕获negative原因,并输出:undefined ___ 负向原因。
    (reason, data)=>{ console.log(`捕获negative原因,并输出:${data} ___ ${reason}`) }
);

//1-1、这里拓展下,如果then有第二个参数,即接收negative原因并处理的函数,正常catch是执行不了的【then有第2个参数,catch无效】
new Promise((positive, negative)=>{
    negative("负向原因。")
})
.then(
    (data)=>{ console.log("上面是negative,不会进到这里" + data) },
    (reason)=>{ console.log("上面是negative,会进来" + reason + "但是我注释掉了,所以这里没处理到。") }
)
.catch(
    (reason, data)=>{ console.log(`捕获negative原因,并输出:${data} ___ ${reason}`) }
);

2、then的第一个函数参数运行出错,能catch到报错使js程序不至于暂停(这就是相当于try catch的能力了)
new Promise((positive, negative)=>{
    positive("正向数据,进入then的第1个处理函数——————")
    // negative("负向原因。")
})
.then(
    (data)=>{ 
    	console.log(data); //控制台输出:正向数据,进入then的第1个处理函数——————
   		console.log(`特意使用不存在的变量${notExistVariable_willError}`); 
   	},
    (reason)=>{ console.log(reason); }
)
.catch(//控制台输出:then的第1个函数使用了不存在的变量,报错:ReferenceError: notExistVariable_willError is not defined ___ undefined
    (reason, data)=>{ console.log(`then的第1个函数使用了不存在的变量,报错:${reason} ___ 接收到的数据:${data}`) }
);


8、all的用法

概括

  • all函数的数组参数中的所有的promise都成功执行完毕时触发then的第一个函数参数,只要任意没有成功都触发then的第2个函数参数。

代码

Promise.all([
    new Promise((positive, negative)=>{
       positive("成功1"); 
    }),
    new Promise((positive, negative)=>{
       positive("成功2"); 
    }),
    new Promise((positive, negative)=>{
       positive("成功3"); 
    }),
])
.then(
    (results)=>{ console.log(`成功结果集:${results.join(",")}`) },
    (reason)=>{ console.log(`毕成功,所以不可能有reason=> ${reason}`); }
);
//控制台输出: 成功结果集:成功1,成功2,成功3

9、race() //竞态

概括

  • race数组参数中的promise都是竞争关系,任意完成(不管是调用positive还是negative),都会执行then,并且后续race数组参数中的剩余promise如果完成了也不再触发then了。

代码

//以下代码总是输出: 成功偶数111=>xx  或者 失败奇数111=>xx , 即:
//					只会在执行race数组参数中的第一个promise后,触发与race同级的then一次。
Promise.race([
    new Promise((positive, negative)=>{
       let numIn_100 = Math.floor(Math.random()*100);
       if(numIn_100%2==0){
           positive(`成功偶数111=>${numIn_100}`);
       }else{
           negative(`失败奇数111=>${numIn_100}`);
       }
    }),
    new Promise((positive, negative)=>{
       positive("失败2222"); 
    }),
    new Promise((positive, negative)=>{
       negative("成功3333"); 
    }),
])
.then(
    (data)=>{ console.log(`positive data:${data}`) },
    (reason)=>{ console.log(`negative reason=> ${reason}`); }
);

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

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

相关文章

移动硬盘直接拔下来有什么影响吗?数据丢失如何恢复

在日常的工作与生活中&#xff0c;移动硬盘成为了我们不可或缺的数据存储和传输设备。然而&#xff0c;很多人或许都曾有过这样的经历&#xff1a;在数据传输或使用中&#xff0c;由于一时疏忽或赶时间&#xff0c;直接拔下了正在工作的移动硬盘。这样的行为&#xff0c;虽然看…

冷却液温度传感器检测诊断

检测发动机冷却液温度&#xff0c;向ECU输入温度信号&#xff0c;作为燃油喷射和点火正时的修正信号&#xff0c;同时也是其他控制系统的控制信号。 冷却液温度传感器安装位置 冷却液温度传感器&#xff08;俗称水温传感器&#xff09;一般安装在缸体水道上&#xff0c;缸盖水…

docker命令实现容器管理

容器镜像分类 1.系统类镜像 2.应⽤镜像 搜索镜像 下载镜像 默认下载最新版本 1.安装docker环境 #配置变量 2.启动并且使⽤ 2.配置远程管理 帮助和指令

JVM的五个 invoke 指令详解

文章目录 概述invoke 指令概览1. invokespecial2. invokevirtual3. invokestatic4. invokeinterface5. invokedynamic 总结 概述 Java 虚拟机 (JVM) 是 Java 语言的核心组件之一&#xff0c;负责执行 Java 字节码。在 JVM 中&#xff0c;invoke 指令用于执行方法调用。本文将详…

K8s 集群巡检

K8s 集群巡检 上次发文 K8s 无备份&#xff0c;不运维&#xff0c;文章开篇&#xff0c;插入了一张 K8s 集群巡检的图片&#xff0c;好多小伙伴私信留言&#xff0c;问我要开源地址。由于其通用性不高&#xff0c;大多数公司需要结合自身的架构情况进行不同的巡检&#xff0c;…

互联网应用主流框架整合之Redis配置

在实际的商用系统中&#xff0c;Redis常用的机制包括备份、回收策略、主从复制、哨兵模式、集群模式等&#xff0c;在保证性能的同时还要保证其高可用 首先要熟悉一下Redis的配置文件&#xff0c;如果实在linux系统中&#xff0c;配置文件是redis.conf&#xff0c;而在windows…

linux系统编程:网络通信

1.网络 1.粘包 tcp特点 面向连接 字节流&#xff08;TCP 将数据视为连续的字节流&#xff0c;没有明确的消息边界。会发生粘包问题。 避免粘包 特殊分隔符&#xff1a;在消息间加入特殊的分隔符&#xff08;如换行符或其他特殊字符&#xff09;&#xff0c;接收方根据分…

404炫酷单页面html5源码

源码介绍 404炫酷单页面html5源码&#xff0c;感觉应该符合一些人的感觉&#xff01;可以用来做404页面。记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 源码下载 分…

Java基础再学习

作为一名实习生&#xff0c;为了夯实基础、查缺补漏&#xff0c;我跟随 B 站学习了以下知识&#xff0c;欲将其留存纪念&#xff0c;故对其中内容进行优化&#xff0c;以使其更为优雅。 面向对象 面向对象编程的定义&#xff1a;借助合适的对象来解决问题&#xff08;如运用 …

可视化表单设计生成器可以实现流程化办公吗?

实现流程化办公一直都是很多客户朋友追求的目标。那么&#xff0c;如何才能实现这一目标&#xff1f;如何为客户提供更优良的产品助力提质、降本、增效&#xff1f;低代码技术平台拥有可视化操作界面、更灵活、更高效、更可靠&#xff0c;是专注于职场办公&#xff0c;助力流程…

牛客笔试小题

目录 牛客.小红取数 牛客.哈夫曼编码​编辑 牛客.字符编码(上一道题的资料) 牛客.最小的完全平方数 牛客.小红取数 01背包问题:在满足总和必须为k的倍数的情况下&#xff0c;选择最大的总和 1.状态表示: dp[i][j]:表示从前面i个数字中挑选&#xff0c;总和%k等于j时候,最大的…

Java SpringBoot+Vue实战教程:如何一步步实现Cosplay论坛设计与实现

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

JWT-JSON Web Token

JSON Web Token&#xff08;缩写 JWT&#xff09;是目前最流行的跨域认证解决方案。 1 跨域认证的问题 互联网服务离不开用户认证。一般流程是下面这样。 用户向服务器发送用户名和密码。服务器验证通过后&#xff0c;在当前对话(session)里面保存相关数据&#xff0c;比如用…

8.23题目:矩阵数字查找

一些闲话&#xff1a; 小编打算给这个刷题系列改个名&#xff0c;以后就用日期做标题吧&#xff0c;哪一天写了就写哪一天的日期&#xff0c; 不然就跑题了&#xff0c;你说是吧&#xff01;啊啊啊&#xff0c;根本做不到每日一题&#xff01;&#xff01;~~>_<~~ 一、…

Mix|使用VS2017CMake构建Qt工程 仿照MVS(仅用于学习)

MVS下载链接&#xff1a;https://www.hikrobotics.com/cn/machinevision/service/download/?module0 CMake工程构建参考&#xff1a;CMake|VS2017CMake3.8搭建Qt项目 文章目录 效果图整体结构实现代码最外层CMakeLists.txt代码实现及CMakeLists.txt搭建CMakeLists.txt搭建主函…

适应CLIP作为图像去雾的聚合指导

Adapt CLIP as Aggregation Instructor for Image Dehazing 2408.12317 (arxiv.org) 大多数去雾方法都存在感受野有限的问题&#xff0c;并且没有探索视觉-语言模型中蕴含的丰富语义先验&#xff0c;这些模型已在下游任务中被证明是有效的。 本文介绍了CLIPHaze&#xff0c;这…

如何使用ssm实现汽车养护管理系统

TOC ssm038汽车养护管理系统jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。…

NAND闪存制造商Kioxia申请IPO,预计市值达103亿美元

据《日本经济新闻》报道&#xff0c;全球第三大NAND闪存制造商Kioxia已向东京证券交易所提交了首次公开募股&#xff08;IPO&#xff09;申请&#xff0c;计划于10月上市。根据《金融时报》的消息&#xff0c;Kioxia希望通过此次IPO筹集至少5亿美元的资金&#xff0c;并可能获得…

Circuitjs web 在线电路模拟器应用简介

Circuitjs 是一款 web 在线电路模拟器, 可以在浏览器上方便地模拟各种模拟或数字的电路, 用户无需安装各种软件, 生成的电路也支持在线分享给其它用户. 访问地址 下述地址我部署的一个版本: https://cc.xiaogd.net/ 此版本的特色是界面翻译成中文时尽量保留了英文, 因此在某…

VBA语言専攻T3学员领取资料通知0823

T3学员领取资料通知0823 各位学员∶本周MF系列VBA技术资料增加706-725讲&#xff0c;T3学员看到通知后请免费领取,领取时间8月23日晚上19:00-8月24日上午11:00。本次增加内容&#xff1a; MF706:在同一页面上打印多个范围 MF707:通过合并行打印多个范围 MF708:将多表中的多…