vue-新的信使fetch&axios
fetch
why:
XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱, 而且基于事件的异步模型写起来不友好。
fetch的问题是兼容性不好
能够兼容ie8的polyfill: https://github.com/camsong/fetch-ie8(原理是不能兼容的地方就是用XMLHttpRequest来写)
//get
fetch("./json/test.json").then(res=>res.json()).then(res=>{console.log(res)}
/* 第一个.then返回的是状态码 res.text会转成字符串 res.json会转成json对象 */
//post
fetch("**",{
method:'post',
headers: {
"Content‐Type": "application/x‐www‐form‐urlencoded"
},
body: "name=kerwin&age=100"
}).then(res=>res.json()).then(res=>{console.log(res)});
fetch("/users",{
method:'post',
// credentials: 'include',
headers: {
"Content‐Type": "application/json"
},
body: JSON.stringify({
name:"kerwin",
age:100
})
}).then(res=>res.json()).then(res=>{console.log(res)});
注意: Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: ‘include’})
axios
axios.get("")
axios.post("")
axios.put("")
axios.delete("")
axios({
url:"",
headers:{
'X‐Client‐Info': '{"a":"3000","ch":"1002","v":"1.0.0","e":"1"}',
'X‐Host': 'mall.cfg.common‐banner'
}
}).then(res=>{
console.log(res.data);
})
返回的数据会被包装
{
*:*
data:真实后端数据
}