遇到甚麼問題?

在以往要使用 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() - 純文字