vue-新的信使fetch&axios

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:真实后端数据
 }