Back-End
JavaScript
fetch
Promise
本篇為 Limedy「Fetch 與 Promise 補充系列」課程的學習筆記。如有錯誤歡迎指正。
以下內容將涵蓋:
想要在前端網頁發出 Ajax Request,可以有下列兩種方式:
XMLHttpRequest,簡稱 XHR。在課程第八週時曾提到,我們可利用 XMLHttpRequest 物件來實現非同步請求,以下列程式碼為例:
.open()
.send()
如果利用 Fetch 來達到相同結果,程式碼如下:
若不指定方法,Fetch 預設方法是使用 GET,與前者相比可發現程式碼簡潔許多。
要進行 API 串接,發出 GET Request,可利用這個網站:Mocky: The world easiest & fastest tool to mock your APIs,能夠自行創造 Response 並指定內容。
在 index.html 加上 fetch('請求的 URL')
即可發出最簡單的 Resquest:
使用開發者工具查看 Network,確實有收到 Response:
或是直接將結果印出來,可知 fetch 其實會回傳一個 Promise:
Promist 是一個獨特的物件,簡單來說就是一個容器,裡面儲存著某個未來才會結束的事件(也就是非同步操作)的結果。
then()
:拿取 Promise Response那麼該如何拿到 Promise 結果呢?我們可利用 .then()
來拿到 Response,如下列程式碼:
可把上述程式碼簡化如下:
.text()
& .json()
:處理 Response Body.text()
利用 .text()
我們會同樣會得到一個 Promise,再以 .then()
處理,可讀取 Response 的 body:
確認可在瀏覽器上印出 text 內容:
.jaon()
若確定 Response 是 JSON 格式,可使用 .json()
以相同寫法來處理,回傳的結果會如同 JSON.parse()
幫我們轉成 json 格式:
確認得到 JSON 格式的結果:
由於 response.json()
這個 Promise 的回傳值是 text,我們可將程式碼簡化如下:
若使用 return 的寫法,可減少縮排層數,簡化程式碼的複雜程度。
上述的寫法,其實是利用 Promise 具有的 Chaining 特性。
由於 .then()
裡面回傳的還是一個 promise 物件,我們可以一直使用 .then()
來對回傳的 promise 做處理。
透過這個特性,我們能夠有效減少層數,以第八週串接 twitch API 為例:
這裡指的錯誤,並非 http status 400、500 那種錯誤,而是根本無法拿到 Response,Fetch 才會回傳錯誤訊息。
在過去課程中,以同步方式傳送請求,可使用 try / catch
來處理錯誤訊息:
但這個錯誤處理無法應用在 callback function,因為 Fetch 使用非同步方式發出請求。
.catch()
:處理錯誤訊息程式碼範例如下:
再把原先的請求 URL 稍作修改,確認可接收錯誤訊息:
簡言之,我們可使用 then()
來接收回傳的結果,catch()
來接收回傳的錯誤。
前面提到過,Fetch 預設方法是使用 GET,若要發出 POST Request,需帶入其他參數,以下列程式碼為例:
發 request 給不同來源 domain 的 API 時,並不會自動把 cookie 帶上去,需加上 credentials: 'includes'
,如下列程式碼:
mode: 'no-cors'
並不能突破 CORS 限制,而是會回傳一個空的 response根據上述結論,要處理非同步,我們可利用 callback function 或 Promise。
以下程式碼示範如何建立 Promise 物件,也就是把一個 Promise 物件 new 出來:
簡化 function 如下:
透過 setTimeout()
結合 promise 應用:
再來利用 function sleep()
宣告一個叫做 myPromise 的 Promise 再回傳回去。如下列程式碼:
上述的 sleep()
函式可簡化成:
若以箭頭函式表達則是:
還可以簡化成這樣,省略 return 的大括號:
最終可簡化成一行:
利用 async / await
可以用看起來像同步的語法,做到非同步的事情。
方法是用 async 宣告一個非同步的 function,裡面放 await 接一個 Promise 物件,會等到執行完 await 裡面的 promise 才往下執行。
以下列程式碼為例:
對照使用 Promise 的寫法:
甚至可使用同步方式的 try / catch
來處理錯誤訊息:
參考資料: