JavaScript 异步编程解决方案-中篇

news2024/11/18 1:25:44

天下事有难易乎? 为之,则难者亦易矣;不为, 则易者亦难矣。人之为学有难易乎? 学之,则难者亦易矣;不学,则易者亦难矣。

async 函数 和promise then的规则一样

	async function fun() {
				//1.如果返回一个非promise,返回的是一个成功的promise值 
				// return 1
				//2.如果返回一个promise,返回的状态值就是promise值 
				return new Promise((reslove, rejcet) => {
					// reslove('ok')
					// rejcet('error')

					throw '错误'
				})
			}
			console.log(fun());
		//await  表达式  右边一般是promise 对象也可以是其他值
		//必须写在async  函数 。async函数里面没有await 
		//如果await  promise 异常可以用try  cath 捕获
	async function func() {
				let a = await 100
				console.log(a);
				let p = new Promise((reslove, reject) => {
					// reslove('helloWorld')
					reject('err')
				})
				try {
					await p
				} catch (e) {
					console.log(e);
				}
			}
			func()

1,如何使用promise

在这里插入图片描述

1.Promise 构造函数:new Promise(executor)

Promise() 只能通过 new 运算符来构造。如果尝试在没有使用 new 的情况下调用它,会抛出 TypeError 异常。

1.executor 执行器函数:(resolve,reject)=>{}
2.resolve 函数:内部定义成功时候调用values=>{}
3.reject 函数:内部定义失败时候调用error=>{}

备注:executor 会在Promise内部同步调用,异步调用在回调函数里面

let p = new Promise((resolve, reject) => {
				//同步调用
				console.log('调用了额');
			})
			console.log('外部');
		</script>
2.Promise.prototype.then()

Promise 实例的 then() 方法最多接受两个参数:用于 Promise 兑现和拒绝情况的回调函数。它立即返回一个等效的 Promise 对象,允许你链接到其他 Promise 方法,从而实现链式调用。
then(onFulfilled) onFulfilled 成功回调
then(onFulfilled, onRejected) onRejected失败回调

以下: Promise 对象(称之为 p)

1.返回一个值:p 以该返回值作为其兑现值。
let p = new Promise((resolve, reject) => {
				//同步调用

				resolve(1)

			})
			console.log(p);

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

2.没有返回任何值:p 以 undefined 作为其兑现值。

在这里插入图片描述

3.抛出一个错误:p 抛出的错误作为其拒绝值。
let p = new Promise((resolve, reject) => {
				//同步调用

				throw new Error('错误了')

			})
			console.log(p);

在这里插入图片描述

4.返回一个已兑现的 Promise 对象:p 以该 Promise 的值作为其兑现值。
5.返回一个已拒绝的 Promise 对象:p 以该 Promise 的值作为其拒绝值。
6.返回另一个待定的 Promise 对象:p 保持待定状态,并在该 Promise 对象被兑现/拒绝后立即以该 Promise 的值作为其兑现/拒绝值。
3.Promise.prototype.catch() 失败的回调

Promise 实例的 catch() 方法用于注册一个在 promise 被拒绝时调用的函数。它会立即返回一个等效的 Promise 对象,这可以允许你链式调用其他 promise 的方法。此方法是 Promise.prototype.then(undefined, onRejected) 的一种简写形式。
catch 方法用于在 Promise 链进行错误处理

	let p = new Promise((resolve, reject) => {
				//同步调用

				reject('错误')

			})
			p.catch(err => {
				console.log(err);
			})
4.Promise.reject()

Promise.reject() 静态方法返回一个已拒绝(rejected)的 Promise 对象,拒绝原因为给定的参数

let p2 = Promise.reject('1')

			let p3 = Promise.reject(new Promise((resolve, reject) => {
				resolve('ok')
			}))

			//无论传什么类型都返回失败的结果
5、Promise.resolve() 接受一个参数,返回成功或者失败的promise,

备注 :传入的是非promise值,结果一直是成功、传入的是promise对象,promise参数结果的值,决定其最终结果值:

	let p = Promise.resolve('1')
			console.log(p);
			let p2 = Promise.resolve(new Promise((reslove, reject) => {
				// reslove('ok')
				reject('no')

			}))
5、Promise.all()

Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入,并返回一个 Promise。当所有输入的 Promise 都被兑现时,返回的 Promise 也将被兑现(即使传入的是一个空的可迭代对象),并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝,则返回的 Promise 将被拒绝,并带有第一个被拒绝的原因。

备注:都是成为未成功,有一个失败为失败类似&&运算

let p1 = new Promise((reslove, reject) => {
				reslove('ok')
			})

			let p2 = Promise.resolve('2')

			let p3 = Promise.resolve('3')
			let p = Promise.all([p1, p2, p3])
			console.log(p);

在这里插入图片描述

let p1 = new Promise((reslove, reject) => {
				reslove('ok')
			})

			let p2 = Promise.reject('2')

			let p3 = Promise.reject('3')
			let p = Promise.all([p1, p2, p3])

返回第一个失败的结果作为结果
在这里插入图片描述

6、Promise.race()

Promise.race() 静态方法接受一个 promise 可迭代对象作为输入,并返回一个 Promise。这个返回的 promise 会随着第一个 promise 的敲定而敲定。

备注:第一个 promise 的敲定而敲定。

let p1 = new Promise((reslove, reject) => {
				reslove('ok')
			})

			let p2 = Promise.reject('2')

			let p3 = Promise.reject('3')
			let p = Promise.race([p1, p2, p3])
			console.log(p);

在这里插入图片描述

let p1 = new Promise((reslove, reject) => {
				reslove('ok')
			})

			let p2 = Promise.reject('2')

			let p3 = Promise.reject('3')
			let p = Promise.race([p2, p1, p3])
			console.log(p);

在这里插入图片描述
天下事有难易乎?
为之,则难者亦易矣;不为,
则易者亦难矣。人之为学有难易乎?
学之,则难者亦易矣;不学,则易者亦难矣。

promise 关键问题

1.如何改变promise 的状态?

1.resolve
2.reject
3.抛出异常错误

2.promise 多个成功回调和失败的函数都会回调吗。
如果promise状态改变了,都会执行

3.promise then的结果由什么决定

有then里面回调函数决定
1.返回非Promise 成功 2.返回Promise有Promise决定最后值 3.抛出异常返回失败

let p2 = p.then(res => {
				// console.log('1=>' + res);
				// return Promise.resolve(9)
				throw '错误哈~'
				// return 1
			})
			console.log(p2);

4、promise 串联多个任务

p.then(res => {
				return new Promise((reslove, reject) => {
					reslove('ok')
				})
			}).then(v => {
				console.log(v);
			}).then(x => {
				console.log(x);
			})

5、异常穿透catch

p.then(res => {
				return new Promise((reslove, reject) => {
					reslove('ok')
					// reject('err')
				})
			}).then(v => {
				console.log(v);

				throw '错误'
			}).then(x => {
				console.log(x);
			}).catch(err => {
				console.log('catch ' + err);
			})
6、中断promise 链有且只有个方法,返回一个pending 状态的promise		
p.then(res => {
				return new Promise((reslove, reject) => {
					reslove('ok')
					// reject('err')
				})
			}).then(v => {
				console.log(v);
				return new Promise(() => {})
				// throw '错误'
			}).then(x => {
				console.log(x);
			}).catch(err => {
				console.log('catch ' + err);
			})

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

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

相关文章

HarmonyOS4.0——ArkUI应用说明

一、ArkUI框架简介 ArkUI开发框架是方舟开发框架的简称&#xff0c;它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架&#xff0c;它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具&#xff0c;帮助开发者提升应用界面开发效率 30%&#xff0c;开发…

element + table 每两行对比相同值列合并

在开始之前先要明确几个概念&#xff1a; 保持不变&#xff1a;{ rowspan: 1, colspan: 1 } 删除一个单元格&#xff1a;{ rowspan: 0, colspan: 0 } 合并一个单元格&#xff1a;{ rowspan: 2, colspan: 1 } <template><div><el-table:data"tableData&quo…

二叉树的遍历 Java

二叉树的遍历 递归法前序遍历中序遍历后序遍历改进 迭代法前序、后序遍历中序遍历 Java 中 null、NULL、nullptr 区别 public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, Tree…

LLM推理部署(七):FireAttention——通过无损量化比vLLM快4倍

Mixtral作为第一个在数万亿tokens上训练的OSS模型&#xff0c;最近在人工智能社区掀起了波澜&#xff0c;它支持“混合专家”&#xff08;MoE&#xff09;&#xff0c;并且训练和推理速度非常快。 Fireworks AI是第一个托管Mixtral的平台&#xff0c;在Mixtral公开发布之前就托…

小程序中使用微信同声传译插件实现语音识别、语音合成、文本翻译功能----语音识别(一)

官方文档链接&#xff1a;https://mp.weixin.qq.com/wxopen/plugindevdoc?appidwx069ba97219f66d99&token370941954&langzh_CN#- 要使用插件需要先在小程序管理后台的设置->第三方设置->插件管理中添加插件&#xff0c;目前该插件仅认证后的小程序。 语音识别…

༺༽༾ཊ—游戏-01_2D-开发—ཏ༿༼༻

首先利用安装好的Unity Hub创建一个unity 2D&#xff08;URP渲染管线&#xff09;项目 选择个人喜欢的操作格局&#xff08;这里采用2 by 3&#xff09; 在Project项目管理中将双栏改为单栏模式&#xff08;个人喜好&#xff09; 找到首选项&#xff08;Preferences&#xff09…

2024 解决matplotlib中文字体问题

第一种代码&#xff08;失败代码&#xff09; import matplotlib as mpl import matplotlib.pyplot as plt from matplotlib.font_manager import FontPropertiesfont_path /Users/huangbaixi/Desktop/SimHei.ttfdef plot_demo():#print(mpl.get_cachedir())# 绘制折线图font…

【记忆化搜索】

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 前言 记忆化搜索是一种优化搜索算法的方法&#xff0c;它可…

Apache StringUtils:Java字符串处理工具类

简介 在我们的代码中经常需要对字符串判空&#xff0c;截取字符串、转换大小写、分隔字符串、比较字符串、去掉多余空格、拼接字符串、使用正则表达式等等。如果只用 String 类提供的那些方法&#xff0c;我们需要手写大量的额外代码&#xff0c;不然容易出现各种异常。现在有…

GL Logger和CANFDLog-OTL-128两款记录仪都是如何实现高效的报文录制的?

GL Logger是Vector推出的记录CAN/CAN FD、LIN、FlexRay和MOST数据通信的工具。以GL2400为例带着大家一步步地实现路试过程中通过整车OBD口进行CAN/CANFD报文的录制。 Step1 设备配置 设备配置即设备录制方式、录制内容、设备休眠唤醒策略等。 ▷ 打开Vector Logger Configurat…

调试ad5245的总结

调试ad5245的总结 这个ad5245是通过IIC与FPGA进行通信的&#xff0c;首先要理解IIC协议。 经验总结&#xff1a; 1、SCL和SDA端的要有上拉电阻&#xff0c;且上拉电阻能正常工作&#xff1b; 2、要往SDA数据线上写三个字节才能调节ad5245的电阻值&#xff0c;第三个字节就是…

html中的flex是什么?——弹性布局

在HTML中&#xff0c;flex是一种布局方式&#xff0c;用于处理容器中的子元素的布局。它是CSS3的一部分&#xff0c;也被称为弹性布局。 通过使用flex布局&#xff0c;可以将容器中的子元素进行灵活的定位和扩展&#xff0c;以适应不同的屏幕尺寸和设备。它提供了一种简单而强…

flink 1.18 sql gateway /sql gateway jdbc

一 sql gateway 注意 之所以直接启动gateway 能知道yarn session 主要还是隐藏的配置文件&#xff0c;但是配置文件可以被覆盖&#xff0c;多个session 保留最新的applicationid 1 安装flink &#xff08;略&#xff09; 2 启动sql-gatway(sql-gateway 通过官网介绍只能运行…

【时光记:2023的心灵旅程】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

tree数据处理

接口获取数据oldArr [{"deptCode": "01","parentCode": "000","sortKey": 4,"deptName": "办公室&#xff08;党委办公室、董事会办公室&#xff09;","children": [{"deptCode":…

九、Qt C++ 毕业设计 数据库相关

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时&#xff0c;几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计-CSDN博客》 …

从JVM角度对java中引用的理解

学java这么久了&#xff0c;对java引用越来越深刻&#xff0c;好好梳理一下下面三个问题&#xff0c;带着问题进行理解。 什么是引用&#xff1f;引用存放在jvm哪个区域&#xff1f; 引用是一种变量类型。引用类型占四个字节。 变量类型分为基本类型和引用类型。 我们知道jav…

2023年跨国企业如何实现跨境数据传输合规化(上)

一、什么是数据跨境传输&#xff1f; 首先了解一个概念&#xff0c;什么是数据跨境传输&#xff1f; 数据跨境传输简单概括就是指信息通过互联网等网络媒介&#xff0c;在跨国企业之间进行传递和交换的过程。 有一则官方网站关于全球化数字化的数据统计&#xff1a;仅2019 年…

【Web】什么是 XSS 攻击,如何避免?

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Web ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 常见方法&#xff1a; 结语 我的其他博客 前言 在当今数字化时代&#xff0c;网络安全成为信息技术领域中的一项至关重要的任务。X…

视频和音频怎么合并在一起?分享3个轻松合并的实用技巧

视频和音频怎么合并在一起&#xff1f;在数字媒体时代&#xff0c;视频和音频是制作多媒体内容不可或缺的元素。有时我们需要将视频和音频合并在一起&#xff0c;以创建更丰富、更有趣的多媒体内容。那么&#xff0c;如何将视频和音频合并在一起呢&#xff1f;下面将介绍一些实…