Vue 中怎麽發起請求（二）
fetch
是新一代XMLHttpRequest的一種替代方案。無需安裝其他庫。可以在瀏覽器中直接提供其提供的api輕松與後臺進行數據交互。
基本用法：
1 fetch（url，{parmas}）.then(res=>
return res.json() //返回promise對象
).then(data=>{
return data //返回真正數據
}).catch(err=>{
throw new Error(err)
})
------------------------------------------------------------------------------------------------------------------
(1) get 方式：
<script src="http://cdn.bootcss.com/qs/6.5.2/qs.js"></script>
<script type="text/javascript">
window.onload=function(){
var url="http://www.baidu.com" //填寫自己的域名地址
var btn=document.getElementById("btn");
var data={
verified:1,
warningLevel:0,
}
btn.onclick=function(){
fetch(url+"/stats/getUserList?sessionID=3ecf8905a98cb752b127302bf08f08e5&verified=1&warningLevel=0").then(res=>{
return res.json(); //返回promise對象
}).then(data=>{
console.log("返回值：",data)
}).catch(err=>{
console.log(err)
})
}
------------------------------------------------------------------------------------------------------------------
(2) POST方式：
btn.onclick=function(){
fetch(url+"/stats/getUserList",{
method:"POST",
headers:{
‘Content-Type‘: ‘application/x-www-form-urlencoded‘
},
body:Qs.stringify(data)
}).then(res=>{
console.log(res)
return res.json();
}).then(data=>{
console.log("返回值：",data)
}).catch(err=>{
console.log(err)
})
}
註意：1 fetch返回的是promise對象。所以fetch().then()第一個then裏返回的並不是真正的數據。而是一個promise，所以我們需要通過鏈式操作第二個then()來獲取真正的數據。
2 fetch發送參數是通過body字段來實現的。body是fetch第二個參數的必選參數之一。params的參數如下
method(String): HTTP請求方法，默認為GET
body(String): HTTP的請求參數
headers(Object): HTTP的請求頭，默認為{}
credentials(String): 默認為omit,忽略的意思，也就是不帶cookie;還有兩個參數，same-origin，意思就是同源請求帶cookie；include,表示無論跨域還是同源請求都會帶cookie
3 body帶的參數是一個序列化以後的字符串。類似 name="coc"&age=30.所以這裏我們通過qs庫進行了序列化。註意通過cdn引入qs後qs函數應該是Qs,Qs.stringify(data)
2 在vue中的使用：
fetch支持在vue環境中使用。這樣通過ajax請求就無需通過安裝axios依賴庫來實現。
具體使用：
（1）組件中發送請求：
<div style="margin-top:20px">
<button @click="getLevelData" >獲取黃色用戶信息</button>
</div>
export default{
name:"users",
data(){
return{
arr:[]
}
},
methods:{
getLevelData(){
async function getInfo(){
return await fetch(api+"/stats/getUserList",{
method:"post",
headers:{
‘Content-Type‘:"application/x-www-form-urlencoded"
},
body:qs.stringify(data)
}).then(res=>res.json())
}
getInfo().then(res=>{
this.arr=res.data.data
}).catch(err=>{
console.log("get--error:",err)
})
}
}
(2) 表單元素通過fetch發送ajax請求
<p>手機號：<input type="text" v-model="mobile"></p>
<p>密碼:<input type="password" v-model="password"></p>
<input type="button" value="登錄" @click="go">
<script>
export default {
name:"Login2",
data(){
return{
mobile:"",
password:"",
}
},
methods:{
go(){
var data={
mobile:this.mobile,
password:this.password
}
getLevelData(){
async function getInfo(){
return await fetch(api+"/stats/getUserList",{
method:"post",
headers:{
‘Content-Type‘:"application/x-www-form-urlencoded"
},
body:qs.stringify(data)
}).then(res=>res.json())
}
getInfo().then(res=>{
this.arr=res.data.data
}).catch(err=>{
console.log("get--error:",err)
})
}
}
}
}
</script>
註意：如果是提交表單元素，那麽一定要添加headers參數， 而且content-Type的值必須是application/x-www-form-urlencoded
heders:{
‘Content-Type‘:"application/x-www-form-urlencoded"
},
（2）通過vuex請求數據
export default {
name:"Login2",
data(){
return{
mobile:"",
password:"",
val:""
}
},
methods:{
go(){
var data={
mobile:this.mobile,
password:this.password
}
this.$store.dispatch("login",data).then(res=>{
this.arr=res.data.data
}).catch(err=>{
console.log("登錄；err",err)
})
}
}
}
store.js 中對應的action
login({commit},payload){
return new Promise((resolve,reject)=>{
fetch("/account/login",payload).then(res=>{
resolve(res)
}).catch(err=>{
console.log("登錄--err:",err)
reject(err)
})
})
},
通過vuex實現請求，fetch發送請求可以不用帶method，body和headers等參數
---------------------
作者：sleeppingforg
來源：CSDN
原文：https://blog.csdn.net/baidu_41601048/article/details/83413884
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
Vue 中怎麽發起請求（二）