链式调用和解决回调地狱的终极解决方法async,await

promise链式调用

		**then 是成功回调,只要在then后边return一个promise
		就可以继续then**
		
<script type="text/javascript">
	let p1=new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve()//成功回调
			// reject()//失败回调
		},2000)//2秒后执行后边的then、catch函数
	})
	p1.then(function(res){
		console.log("成功执行then"+res)
		// 在准备第二个promise对象
		let p2=new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve()
			},1000)
		})
		return p2
	}).then(function(){
		console.log("我是p1 then后边的第二个then")
	})

	p.catch(function(){
		console.log("失败执行catch")
	})
	
</script>

解决回调地狱的终极方法 async/await ES7的语法,可以通过 async/await让代码看起来像同步的

async异步 await等待
await 等待 就是当后面跟的是promise对象,就让他停止 ,先让里面的异步事情做完,在把结果返回给前面的新变量,在继续向后执行
他只生效当前作用域内部,也就是async函数内部。
pGetSend 是一个异步的ajax请求
await会等待这个异步函数请求结束,并把结果给前面的res变量以后,在向后执行代码。

async/await 语法
async/await 是es7的新增语法,是为promise设计的语法。
是回调地狱的终极解决方案,就是用async/await语法把–异步代码写的看起来像同步的代码。

  语法规范:
    1 async关键字写在--函数的前面,就把该函数变成了一个异步函数
    2 await是一个写在 异步函数里面的关键字
    3 await关键字后面的必须是一个promise对象
  满足以上三个条件,就可以把本该在promise的then回调里面接受的结果 ,放在await关键字前面定义一个变量来接受了。 

语法层面的兼容需要用bable

	**语法: 
	async 必须写在函数前边
	await 关键字 后边必须跟着Promise对象
	async function fn(){}**
	
	**<!-- 语法兼容可以借助babel 直接百度即可 -->**
	<script type="text/javascript">
		function pGetSend(url){
			let p=new Promise(function(resolve,reject){
				let xhr=new XMLHttpRequest()
			xhr.open('get',url)
			xhr.onload=function(){
				resolve(xhr.responseText)
			}
			xhr.send()
			})
			return p
		}
		
		async function fn(){
			// 1请求1 
			let res =await pGetSend("url.php")
			let result=JSON.parse(res)
			console.log("1"+res)
			// 2 次
			let res2=await pGetSend("url.php?key=value&key1=vlaue1")
			let result2=JSON.parse(res2)
			console.log("2"+res2)
		}
		fn ()
		
	</script>
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值