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 物件。
將 Prototype 展開,可以發現裡面也有 catch()
,then()
,finally()
,Promise()
等。
而比較特別的地方是 PromiseResult 的 Response,我們將它展開,可以看到 HTTP 狀態,如下圖:
server 回傳 response header:
- status 表示 HTTP 狀態碼。
- ok:true/false 表示成功與否,200-299 為 true。
- 要注意,使用 fetch 時,異常的 HTTP 狀態,例如 404 或 500,並不會導致出現 error,而會正常 resolve,並把 ok status 設為 false,會讓它發生 reject 的只有網路錯誤或其他會中斷 request 的情況。
接著再將 Prototype 的 Response 展開,會發現裡面有許多方法,如下圖
為了獲取 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))
結果如下
把上面的例子改成 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://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