iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
0
自我挑戰組

30 天 node.js 學習筆記系列 第 26

Day 26 Fetch vs XHR

遇到甚麼問題?


在以往要使用 ajax,舊的方式可能是使用 xhr,但他有幾項使用上的缺點 :

  • 設定太過繁瑣,且不集中
  • 每次要啟用新的 ajax 就必須建立新 xhr 物件,已表示新的 ajax
  • 非 promise 設計,會有 callback hell 的困擾

怎麼解決?


在新版 HTML5 API 中 chrome & firefox 實作了 fetch api,主要解決以上的困擾

  • 設定簡潔,易於使用,可讀性高
  • 基於 promise 設計所以不會有 callback hell 的困擾
  • 每次進行 ajax 時,不需 new 一個物件,可重覆使用

使用上只需要傳入,req 需要的 header & body

    fetch({
    	url: '....',
    	method: 'GET'
    })
    // or
    fetch({
    	url: '....',
    	method: 'POST',
    	headers: {...}
    	body: {...}, // Method GET & HEADER 沒有 body 因為參數是用 url 傳遞
    })

詳細 api :

headers, body

而 fetch 本身使用 promise 物件設計,結構會常這樣

    fetch(URL)
    	.then(res => res.json())
    	.then(res => {
    		// promise resolve
    		...
    	})
    	.catch(err => {
    		// promise reject
    		...
    	})

值得注意的是 fetch resolve 成功獲得資訊後,.then 是回傳 resonse 物件,以下是常用屬性

  • status: status code (例如: 200, 404, 500...),包含 error code
  • ok: success status code (狀態碼介於200-299)
  • headers: res Headers物件,可用於檢查 cors
  • ...

Response 其他屬性

最後 response 回傳回來是一個 ReadableStream 二進位物件,不能直接使用必須,使用轉換格式的 function

  • arrayBuffer()
  • blob() - ajax 檔案 or 圖片時可以使用,但不常這麼做
  • formData() - Submit 表單資訊時做使用,以 key - value 格式為主
  • json() - 常用
  • text() - 純文字

上一篇
Day 25 Restfull api 限制
下一篇
Day 27 Call , apply , bind
系列文
30 天 node.js 學習筆記30

尚未有邦友留言

立即登入留言