Fetch兼容性不好，基于promise,fetch请求默认是不带cookie的，需要设置fetch(url,{credentials:'include'})
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="box">
<!-- fetch 兼容性不好 -->
<button @click = "handleFetch()">ajax-fetch</button>
</div>
<script>
var vm = new Vue({
el:'#box',
data:{},
methods:{
handleFetch(){
fetch("json/test.json?name=xiaoming",{
method:'get', //不写也为get请求
})
// .then(res=>{
// console.log(res)
// return res.json()
// })
// .then(res=>{
// console.log(res)
// })
.then(res=>res.json())
.then(res=>{
console.log(res)
})
//res.text() 字符串 res.json() json对象
// post请求-1
// fetch("json/test.json",{
// method:'post',
// headers:{
// "Content-Type":"application/x-www-form-urlencoded" //请求头
// },
// body:'name=xiaoming&age=100'
// }).then(res.json()).then(res=>{console.log(res)})
// post请求-2
// fetch("json/test.json",{
// method:'post',
// headers:{
// "Content-Type":"application/json" //请求头
// },
// body:JSON.stringify({
// name:"xiaoming",
// age:18
// })
// }).then(res.json()).then(res=>{console.log(res)})
}
}
})
</script>
</body>
</html>
