fetch
最后更新于：2022-04-02 05:29:55
## 前言
对于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)
';