Nice to Meet You

I’m Hannah, a Taiwanese 30 years old front end developer.
Learning and sharing always makes me happy, and I am interested in the new things including coding and design.

Skills

  • HTML, RWD
  • JS, ES6, AngularJs, VueJs, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer, now is in afusion
  • Sass / css lecturer for prototype-hacker
  • Host a conference at FEDC
Contact me
# | Sep 18 2018

ES7 async/await

之前曾經寫過一篇 promise 的文章,知道運用 promise 可避免 callback hell 的發生。 es7 的 async/await 其實是 promise 語法糖,讓你可以用更簡潔的方法達到非同步。之前看到許多 async/awit 文章都還是先寫一個 promise,其實是不需要的, 因為 async function 本身就會回傳 promise, (async 就是 promise 語法糖阿,當然就是不用重覆寫了),以下會詳細說明要如何用 async 寫法取代 promise


基本範例

若我想要 a 做完再做 b, 用 promise 跟 async 可以達到相同結果。可以看出 async 更直覺一點

 

Async functions

下面兩個會得到一樣的結果

image_preview

Await

Awiat 只能包在 async function 裡,Awiat 只能包在 async function 裡,Awiat 只能包在 async function 裡. 很重要所以說三次。所以 await 也無法寫在一般 function 裡喔

Await Sequentially (跑接力賽)

Close-Up Of Hands
關鍵字 Awiat 告訴 js 要等待 promise 做完再輪到你。像跑接力賽一樣

會過一秒等待 promise 做完,再 alert()。在這一秒之間程式碼可以同時做別的事情不會就此就打住 (這就是非同步的好處阿)。

Await Parallelly (馬拉松)

USA, New York City, New York City Marathon as seen from above

Promise.all 裡面東西他會同時做,不會等第一個做完才做第二個。像跑馬拉松一樣大家一起出發

Error handle

需要寫 try catch 才能知道

或是這樣寫

參考文章