fetch · 前端工程化指南

## 前言對于vue項目中的xhr的請求統一建議使用相關的模塊工具，這里推薦給大家兩個，axios以及whatgw-fetch. 這兩個工具是同一作者，支持xhr的html,json，表單，文件等多種類型的請求，功能比較強大。 ## 安裝 * npm以及bower安裝 ~~~ npm install whatwg-fetch --save; or bower install fetch. ~~~ * webpack以及js中的使用 `entry: ['whatwg-fetch', ...]` * es2015中的使用 `import 'whatwg-fetch'` ## 使用 * html使用 ~~~ fetch('/users.html') .then(function(response) { return response.text() }).then(function(body) { document.body.innerHTML = body }) ~~~ * json使用 ~~~ 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) }) ~~~ * form的使用，可以直接提交表單數據而不用分別封裝 ~~~ var form = document.querySelector('form') fetch('/users', { method: 'POST', body: new FormData(form) }) ~~~ * post json的使用 ~~~ fetch('/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ 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 }) ~~~ ## 檢測網絡狀態 * 針對xhr特殊的狀態碼，可以拋出異常進行統一的異常處理 ~~~ //檢查返回狀態碼 function checkStatus(response) { if (response.status >= 200 && response.status < 300) { return response } else { var error = new Error(response.statusText) error.response = response throw error } } //轉換為標準的json類型 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) }) ~~~ ## CORS * 發送cookie，當前的域名如果要直接發送cookie，需要設置credentials The "same-origin" value makes fetch behave similarly to XMLHttpRequest with regards to cookies. Otherwise, cookies won't get sent, resulting in these requests not preserving the authentication session. ~~~ fetch('/users', { credentials: 'same-origin' }) ~~~ * For CORS requests, use the "include" value to allow sending credentials to other domains: ~~~ fetch('https://example.com:1234/users', { credentials: 'include' }) ~~~ ## Browser Support Chrome Firefox Safari 6.1+ Internet Explorer 10+ ## 參考資料 * [whatwg-fetch模塊介紹](https://npm.taobao.org/package/whatwg-fetch)