關於h5中的fetch方法解讀(小結)

fetch身為H5中的一個新對象，他的誕生，是為了取代ajax的存在而出現，主要目的只是為了結合ServiceWorkers，來達到以下優化：

1. 優化離線體驗
2. 保持可擴展性

當然如果ServiceWorkers和瀏覽器端的資料庫IndexedDB配合，那麼恭喜你，每個瀏覽器都可以成為一個代理伺服器一樣的存在。 (然而我並不認為這樣是好事，這樣會使得前端越來越重，走以前c/s架構的老路)

既然是h5的新方法,肯定就有一些比較older的瀏覽器不支援了,對於那些不支援此方法的

瀏覽器就需要額外的增加一個polyfill:

[連結]: https://github.com/fis-components/whatwg-fetch

ferch(抓取) :

HTML:

 fetch('/users.html') //這裡回傳的是一個Promise物件,不支援的瀏覽器需要對應的ployfill或透過babel等轉碼器轉碼後在執行.then(function(response) { return response .text()}) .then(function(body) { document.body.innerHTML = body})

JSON :

 fetch('/users.json') .then(function(response) { return response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (ex) { console.log('parsing failed', ex)})

Response metadata :

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) console .log(response.status) console.log(response.statusText)})

Post form:

 var form = document.querySelector('form')fetch('/users', { method: 'POST', body: new FormData(form)})

Post JSON:

 fetch('/users', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //這裡是post請求的請求體name: 'Hubot', login: 'hubot', })})

File upload:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //這裡取得所選的檔案內容data.append( 'user', 'hubot')fetch('/avatars', { method: 'POST', body: data})

(1)和ajax的不同點:

1. fatch方法抓取資料時不會拋出錯誤即使是404或500錯誤,除非是網路錯誤或要求過程中被打斷.但當然有解決方法啦,下面是demonstration:

 function checkStatus(response) { if (response.status >= 200 && response.status < 300) { //判斷回應的狀態碼是否正常return response //正常傳回原回應物件} else { var error = new Error(response //正常回傳原始回應物件} else { var error = new Error(response .statusText) //不正常則拋出一個回應錯誤狀態訊息error.response = response throw error }}function parseJSON(response) { return response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('request succeeded with JSON response ', data) }).catch(function(error) { console.log('request failed', error) })

2.一個很關鍵的問題,fetch方法不會發送cookie,這對於需要保持客戶端和伺服器端常連接就很致命了,因為伺服器端需要透過cookie來識別某一個session來達到保持會話狀態.要想發送cookie需要修改一下訊息:

 fetch('/users', { credentials: 'same-origin' //同域下傳送cookie})fetch('https://segmentfault.com', { credentials: 'include' //跨網域下傳送cookie} )

下圖是跨域訪問segment的結果

如果不出意外的話,請求的url和回應的url是相同的,但是如果像redirect這種操作的話response.url可能就會不一樣.在XHR時,redirect後的response.url可能就不太準確了,需要設定下:response.headers['X-Request-URL'] = request.url適用於( Firefox < 32, Chrome < 37, Safari, or IE.)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。