Nice to Meet You

I’m Hannah, a Taiwanese front end developer.
Have experience on building projects from scratch and enjoy solving problems with a productive team.

Skills

  • HTML, RWD
  • JS, React Js, Vue Js, Angular Js, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer
  • Sass / css lecturer for DD Studio
  • Host a conference at FEDC
Contact me

[JS30] Day 6: Promise and Fetch

Day 5 主要著重於 flex,我之前有寫過兩篇 flexbox basicflex-grow、 flex-shrink、flex-basis,就不另外整理了。
Day 6 著重於 Regex(之前有寫過一篇 Regex 所以這裡就不重覆寫)跟 es6 Promise 跟 Fetch ,這兩個觀念對我來說完全陌生,決定花一些時間研究! 假如理解有錯請各位大大幫忙留言了


Promise

一開始看 Promise 我真的是一頭霧水,太多文章講得太學術。讓我看完還是不知道在幹嘛。感謝 Huli’s Blog 的解釋讓我總算豁然開朗。這邊就借他的範例。
假如我們有三個關於文章的 api,第一個抓取文章列表

第二是給文章 id 抓取文章資訊

第三個是給作者 id 並返回作者資訊 api

假如你要抓作者 email 就必須先抓文章列表 → 文章資訊 → 作者資訊,實作的code 大約長這樣

一層一層往下實作,但這就造成了 callback hell. 下面是經典的 callback hell 圖…
promise
Promise 就是用來解決這件事,用 Promise 上面範例會變怎麼樣呢?

若你想要可讀性更高可以搭配 es6 的 arrow function,是不是更清楚簡單了呢

Creating Promises

Promise 是一個物件,有兩個參數(resolve & reject)

promise(圖來自 bitsofco.de)
Promise 有三種狀態。
1. 成功我們呼叫完成 resolve() 並丟我們想回傳的資料進去 resolve(result);
2. 失敗時我們呼叫失敗 reject()。
3. 成功或失敗前叫等待中 pending

Using Promises

Promises 有一個特別的 method 叫 .then() 當 Promise 執行完就可以呼叫 .then()。他有兩個參數:
1. 當 Promise 成功
2. 當 Promise 失敗(這不常用 會用 catch 取代,後面會提)

promise2
下面是一個實際範例,展示 Promise 接上 then 可以把 return 的結果傳到下一個

這個例子看到 finalValue 承接 addTo return 出來的 4

Handling Errors

為了可讀性,其實可以把 errorFunction 拉出來另外寫如下。

promise4

Promise.all

上面範例都是 a 做完,做 b , b 做完做 c 這種有次序性的非同步,那若是想要一次丟不管順序反正全部都成功再回傳呢?
這是就可以用 promise.all

 

Fetch

Fetch 是號稱要取代 XMLHttpRequest 的技術(之前寫過一篇 ajax)。fetch 有使用 promise 特性,了解 promise 會比較好懂。
被 jquery 慣壞的我們常這樣寫

其實 fetch 語法跟 jquery 的 ajax 有點像

Using Fetch

fetch 有兩個參數
1. 來源

2. 自定義參數(optional)
更多自定義參數設定可以看這裡

另外要注意的是 fetch 只要服器有回應就會回傳 Promise resolve(就算是 404、500 ),所以需要加一下判斷

資料類型

以下分別由幾種不同的資料類型來撰寫的樣式

 

應用在範例

初始值

用 XMLHttpRequest

換成 fetch 之後,程式碼是不是少超多呢

 

Support

Can I Use promises?
Data on support for the transforms2d feature across the major browsers from caniuse.com.

Can I Use fetch?
Data on support for the transforms2d feature across the major browsers from caniuse.com.

參考資料