当前位置：首页 > news >正文

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

news 来源：原创 2024/4/29 5:44:02

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>