Promise链式调用和解决回调地狱的ES7终极解决方法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关键字前面定义一个变量来接受了。 
**语法: 
	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.οnlοad=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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章