# 一、Fetch
# 1、简介
Fetch 其实就是官方提供的一个对标 XMLHttpRequest 对象的一个封装版的 ajax，使用 Fetch 的话，我们就不用像 XMLHttpRequest 使用那样混乱的配置和调用。
当然，使用 Fetch 的方式和前面我们使用 XHR 封装的 ajax 使用上基本相似。
# 2、兼容性处理
http://github.com/camsong/fetch-ie8
# 二、Fetch 使用
fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。
# 1、使用模板：
fetch(url[, options])
// json格式化
.then((res) => res.json())
.then((res) =>
// handle response
)
.catch((error) => {
// handle error
})
模板解析
fetch(url[, options]).then((res) => {
if(res.code === 200){
return res.json()
}else {
return Promise.reject(res.msg)
}
})
# 2、数据响应格式
- response.json()
- response.text()
- response.formData()
- response.blob()
- response.arrayBuffer()
当我们在发送带有请求的 body 时，需要对数据进行字符串化；而在 axios 中，它是自动完成的
# 3、get/post 请求示例
① get 请求
<body>
<script>
fetch('http://jsonplaceholder.typicode.com/posts?id=1')
// json格式化
.then((res) => res.json())
.then((res) => {
//输出响应数据
console.log(res)
})
</script>
</body>
② post 请求
<script>
fetch('http://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
// 字符串化
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
// 或者
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// },
// body: "title=foo&body=body&userId=1"
})
// json格式化
.then((response) => response.json())
.then((res) => {
console.log(res)
})
.catch((error) => console.log(error))
</script>