vue基礎4——fetch&axios
阿新 • • 發佈：2020-07-10
1. fetch
why: XMLHttpRequest 是一個設計粗糙的 API，配置和呼叫方式非常混亂， 而且基於事件的非同步模型寫起來不友好。 相容性不好 https://github.com/camsong/fetch-ie8 get//fetch get
fetch("json/test.json?name=kerwin&age=100").then(res=>{
// console.log(res.json())
//拿到的是 狀態碼
// return a.text() // 文字格式
return res.json() //json格式
}).then(res=>{
console.log(res.data.films)
this.datalist = res.data.films
}).catch(err=>{
console.log(err)
})
post-1
form編碼，name=kerwin&age=100fetch("json/test.json",{
method:"post",
headers:{
"Content‐Type": "application/x‐www‐form‐urlencoded"
},
body:"name=kerwin&age=100" //請求體
}).then(res=>res.json()).then(res=>{
console.log(res)
})
post-2
json編碼，"{name:'kerwin',age:100}"fetch("json/test.json",{
method:"post",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
name:"kerwin",
age:100
}) //請求體
}).then(res=>res.json()).then(res=>{
console.log(res)
})
fetch("**",{
credentials:"include",
method:'post',
headers: {
"Content‐Type": "application/x‐www‐form‐urlencoded"
},
body: "name=kerwin&age=100",
}).then(res=>res.json()).then(res=>{console.log(res)});
2. axios
https://github.com/axios/axios
axios.get("json/test.json?name=kerwin&age=100").then(res=>{
// res.data 才是真正的後端資料
console.log(res.data.data.films)
this.datalist= res.data.data.films
})
post-1-x-www-form-urlencode
axios.post("json/test.json","name=kerwin&age=100").then(res=>{
console.log(res.data)
})
post-2-application/json
axios.post("json/test.json",{
name:"kerwin",
age:100
}).then(res=>{
console.log(res.data)
})