EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

Async/Await in JavaScript (ES7)

十一月 06 2016 Published by under 食記x校園x餐廳活動

上次的文章我們提到了Promise

Promise已經能夠解決許多JavaScript再處理非同步動作上會遇到的問題
但寫多了通常還是會遇到兩個問題

1. 容易雜亂
2. 不容易偵錯

此時,ES6同時有另一個特性被人也被人拿來做JS的流程管理
那就是利用Generator Function和yield來做Courotine

不過Generator的終究不是拿來做非同步處理的
所以ES7便以這種形式為基礎新增了所謂Async/Await的語法

Async/Await的寫法會和generator/yield非常像,但是更簡潔簡單
若是對Generator不熟的人可以先理解Async/Await就夠了
而Async/Await非常容易搭配Promise,所以建議還是先理解Promise再使用Async/Await!

上次我們用Promise寫了一個簡單的小function


function run() {
	return new Promise(resolve, reject) {
		setTimeout(function() {
	        resolve(true)
	    }, 1000)
	}
}

 

若單純只用Promise,執行他時我們會選擇用then來做method chaining,並且取得他回傳的結果

 


run()
	.then(function(result) {
		// result === true
		return result ? 'A' : 'B'
	})
	.then(function(n) {
		console.log(n) // n === 'A'
	})

 

而改寫成await就會單純很多

 


let result = await run()
let n = ? 'A' : 'B'
console.log(n) // n === 'A'

 

不過要使用await,你必須先處在一個async function裡面

 


async function main(){
	let result = await run()
	let n = ? 'A' : 'B'
	console.log(n) // n === 'A'

	await asyncSendMessage(n)
	let response = await postSomeData()

	return 'done'
}

main()

 

當然,await除了可以等待Promise resolve之外,也可以直接等待async function return的結果
所以兩者搭配起來會更簡單
變成非同步動作包成Promise,而async function則是管理執行流程和結果
而Promise.all也能填補await不能同時等待多個項目的空缺

 

Error Handling也變得更加單純

 


async function foo() {
	try {
		let resolved = await bar()
	} catch (err) {
		let rejected = err
	}
}

 

整個管理起來會比純Promise的.then和.catch好理解與偵錯

 

現在的node V7已經可以原生支援async/await了
只要再node後面加上–harmony-async-await的參數
而瀏覽器或較舊的環境則需要Babel的幫助

Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響