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

╰+攻爆jí腚メ 2021-08-30 02:10 321阅读 0赞

## 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关键字前面定义一个变量来接受了。

**语法： 
    	async 必须写在函数前边
    	await 关键字 后边必须跟着Promise对象
    	async function fn(){}**
    	
    	****
    	<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>