Es6 async/awite處理異步

什麼是async/await

• async/await可以用來寫異步代碼
• async/await是基于Promise實作的
• async/await使異步的代碼開起來像同步代碼，更整潔更清晰

async

async作為關鍵字放到函數前面，表示該函數是異步函數

async function fun() {
		return '我是asyn的傳回值'
	}
	console.log(fun())
           

列印結果如下

總結：以上結果證明asyn函數傳回的是一個promise對象，promise通過then擷取傳回值

用法如下

async function fun() {
		return '我是asyn的傳回值'
	}
	fun().then(res=>{
		console.log(res)
	})
           

結果如下：

既然傳回的是promise對象就代表可以通過catch方法來接收函數内部錯誤

async function fun(flag){
		if(flag){
			return 'async reslove'
		}else{
			throw 'async error'
		}

	}
	console.log(fun(true))
	console.log(fun(false))

	fun(true).then((res)=>{
		console.log(res)
	}).catch((err)=>{
		console.log(err)
	})

	fun(false).then((res)=>{
		console.log(res)
	}).catch((err)=>{
		console.log(err)
	})
           

結果如下

await

await關鍵字隻能放到async函數裡面，await後面可以放一個傳回promise對象的表達式

模拟一個異步函數，2s後輸出‘執行啦’,代碼如下

function timeout(){
		return new Promise((reslove)=>{
			setTimeout(()=>{
				reslove('執行啦')
			},2000)
		})

	}
	async function fun(){
		let result = await timeout();
		console.log(result)
	}

	fun()
           

打開控制台，2s後輸出‘執行啦’。在async函數内部遇到await，代碼就暫停到這裡了，等await後面的promise對象執行完畢拿到結果并傳回之後，代碼繼續執行，寫異步代碼就像寫同步代碼，簡介明了，規避了地獄回調