iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

Be friend with JavaScript系列 第 24

Day 24 - fetch

fetch 改善了 XHR 又長又麻煩的寫法,簡化了程式碼使閱讀容易許多,而 fetch return 的是 Promise。
基本用法:let promise = fetch(url, [options]),第二個參數為 method,body,headers...等,若沒有第二個參數,則預設為 GET 請求。

例如:

const url = fetch("https://randomuser.me/api/?results=1");
console.log(url);

這時可以看到 fetch 回傳的是 Promise 物件。
https://ithelp.ithome.com.tw/upload/images/20210925/20140282Hw055n21Ad.jpg
將 Prototype 展開,可以發現裡面也有 catch(),then(),finally(),Promise()等。
而比較特別的地方是 PromiseResult 的 Response,我們將它展開,可以看到 HTTP 狀態,如下圖:
https://ithelp.ithome.com.tw/upload/images/20210925/201402821XOH6zBOM1.jpg

server 回傳 response header:

  • status 表示 HTTP 狀態碼。
  • ok:true/false 表示成功與否,200-299 為 true。
  • 要注意,使用 fetch 時,異常的 HTTP 狀態,例如 404 或 500,並不會導致出現 error,而會正常 resolve,並把 ok status 設為 false,會讓它發生 reject 的只有網路錯誤或其他會中斷 request 的情況。

接著再將 Prototype 的 Response 展開,會發現裡面有許多方法,如下圖
https://ithelp.ithome.com.tw/upload/images/20210925/20140282B9Zj2qjwhp.jpg

為了獲取 response body,我們要使用這些方法才能成功取得資料,而每次只能使用一種方法

  • response.text() 讀取 response,以文字形式回傳 response。
  • response.json() 將 response 轉換為 JSON 格式來回傳。
  • response.formData() 以表單的形式回傳 response。
  • response.blob() 以 Blob 形式回傳 response。
  • response.arrayBuffer() 以 ArrayBuffer 形式回傳 response。

例如:
使用 json(),以 json 格式回傳結果:

const url = fetch("https://randomuser.me/api/?results=1")
.then(response => response.json()) // 以 json 格式回傳,這個 then 回傳的結果會傳入下一個參數
.then(results => console.log(results)) // 接收上一個 then 的結果,印出 json 格式資料
.catch(err => console.log(err))

結果如下
https://ithelp.ithome.com.tw/upload/images/20210925/20140282F47gNCnzFQ.jpg
把上面的例子改成 text(),以文字的格式回傳結果:

const url = fetch("https://randomuser.me/api/?results=1")
.then(response => response.text()) // 以文字格式回傳,這個 then 回傳的結果會傳入下一個參數
.then(results => console.log(results)) // 接收上一個 then 的結果,印出文字格式的資料
.catch(err => console.log(err))

結果如下
https://ithelp.ithome.com.tw/upload/images/20210925/20140282IDqz1UFUvl.jpg

參考資料:
https://zh.javascript.info/fetch
https://mtr04-note.coderbridge.io/2020/09/07/about-fetch/
https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch


上一篇
Day 23 - Promise
下一篇
Day 25 - Exception Handling
系列文
Be friend with JavaScript39

尚未有邦友留言

立即登入留言