Promise和async以及await的联系

想要了解Promise和async以及await的联系,首先我们要了解Promise和async ,await是做什么用的,以及为什么有Promise和async await?
可以结合回调函数和Promise以及 async await关键字观看链接: 跳转.

Promise

Promise是什么 ?为什么有Promise?Promise是做什么的?

Promise是什么 ?

我们先在控制台输出console.dir(Promise)看看Promise 是什么
在这里插入图片描述
由上可以清楚的知道Promise其实是一个构造函数, 自己身上有all、reject、resolve这些方法,原型上有then、catch这些方法。这么说用Promise new出来的对象肯定就有then、catch方法。

为什么有Promise?Promise有什么用?

为什么有Promise?
因为异步之间存在联系的 是某个异步操作要等待别的操作对他的结果,这种联系的处理,会让代码的复杂度急剧增加因此形成回调地狱,而Promise可以帮助我们避免回调地狱,让异步变得更简单,变更可控。是ES官方参考了大量的异步场景,总结出了一套异步通用的模型,这套模型可以覆盖几乎所有的异步场景。

Promise有什么用? 让回调变得更简单,更可控
下面我门看一个例子.
比如:强化一个装备 当强化成功是是停止强化,强化失败就一直强化

	function strengthen(equipment,callback){
		console.log(`开始强化{nvsheng}`);
		setTimeout( ()=>{
			if(Math.random() < 0.3 ){
				callback(true)
			}else{
				callback(false)
			}
		},1500)
	}
	strengthen('传世龙神剑',function(result){
		if (result) {
			console.log('第一次强化传世龙神剑成功了')
		}else{
			console.log('第一次强化传世龙神剑失败了');
			strengthen("传世龙神剑",function(result){
				console.log(result)
				if(result){
					console.log("第二次强化传世龙神剑成功了")
				}else{
					console.log('第二次强化传世龙神剑失败了')
					strengthen("传世龙神剑",function(result){
						console.log(result)
						if(result){
							console.log("第三次强化传世龙神剑成功了")
						}else{
							console.log('第三次强化传世龙神剑失败了')
							strengthen("传世龙神剑",function(result){
								console.log(result)
								if(result){
									console.log("第四次次强化传世龙神剑成功了")
								}else{
									console.log('第四次强化传世龙神剑失败了')
								}
							})
						}
					})
				}
			})
		}
	})

在这里插入图片描述
上面的这中写法看上去就很复杂,如果四次强化失败肯定还是要继续的。但是太多了就不写那个多写几个意思一下吧
这里简单说一下Promise 的三种状态:
pending:进行中
resolved:已经成功
rejected 已经失败
状态改变:
Promise对象的状态改变,只有两种可能:
从pending变为resolved
从pending变为rejected。
这两种情况只要发生,不会再变了

	function strengthen(equipment,callback){
		return new Promise(resolve => {
			console.log(`开始强化${equipment}`);
			setTimeout( ()=>{
				if(Math.random() < 0.5 ){
					resolve(true)
				}else{
					resolve(false)
				}
			},1500)
		})
	}
	for(let i = 1;i <=20;i++){//假如强化20次
		if(i == 1){
			pro = strengthen("传世龙神剑")
		}
		pro = pro.then(result => {
			if(result === undefined){
				return
			}else if(result){
				console.log(`第${i}次强化传世龙神剑成功了`)
			}else{
				console.log(`第${i}次强化传世龙神剑失败`)
				if(i <= 20 ){
					return strengthen("传世龙神剑")
				}
			}
		})
	}

在这里插入图片描述
这种和上面的效果是不是一样的,但是明显比上面更加简单的清新的很多.所以说让回调变得更简单,变更可控
Promise 对象的状态不受外界影响

async以及await

async以及await是什么?

async以及await是ES7中的标准,是为优化Promise而开发出来的 可以说async/await是异步编程终级解决方案

async 是一个修饰符,async 被修饰的函数会默认的返回一个Promise对像
在这里插入图片描述
因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。

await 也是一个修饰符,但是必须放在 async 函数内部使用, await关键字的作用 就是获取 Promise中返回的内容,resolve或者reject的值。

async命令

简化promise创建的 声明一异步任务(async function 对象)

async function fun() {
    return 1;
}
const pro = fun();
console.log(pro)
//等同于
const pro = new Promise((resolve,reject) => {
	resolve(1);
 })

多种创建方式

// 函数声明
async function foo() {}
 
// 函数表达式
const foo = async function () {};
 
// 对象的方法
let obj = { async foo() {} };
await 命令

等待 等待一个异步任务执行完成的结果
正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。

async function f() {
  return await 123;
}
f().then(v => console.log(v))

上面代码中,await命令的参数是数值123,它被转成 Promise 对象,并立即resolve

Promise和async以及await的联系

总结
Promise可以避免异步种的回调地狱 使异步变得更加简单清新,更可控
async以及awai却是为了简化Promise,可以说async以及awai是JavaScript异步编程目前的终级解决方案

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值