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>

 

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