Vue前端后端的交互方式?axios
更新時(shí)間：2022年04月25日 08:39:53 作者：清城幻影
這篇文章主要介紹了Vue前端后端的交互方式?axios，axios?為第三方數(shù)據(jù)請(qǐng)求庫，下文具體的內(nèi)容介紹需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助
前言：
大家都知道,只要進(jìn)行數(shù)據(jù)交互,肯定就要去請(qǐng)求接口,數(shù)據(jù)請(qǐng)求的方式有vue-resource axios fetch等方式進(jìn)行數(shù)據(jù)集請(qǐng)求
- 1，vue-resource ：官方出品，在vue2x之后已經(jīng)停止更新
- 2，axios ：第三方數(shù)據(jù)請(qǐng)求庫
- 3, fetch：是
JavaScript最新標(biāo)準(zhǔn)出的一個(gè)數(shù)據(jù)請(qǐng)求方式
今天跟大家談?wù)勎覀冏钍煜?也是最常用的axios
安裝：
npm install --save axios
語法
最簡(jiǎn)單的寫法
get請(qǐng)求：
axios.get("請(qǐng)求地址?kty=val&key=val").then(()=>{
//成功的回調(diào)函數(shù)
}).catch(()=>{
//失敗的回調(diào)函數(shù)
})post請(qǐng)求
一般寫法
axios.post("請(qǐng)求地址",{發(fā)送的key:發(fā)送的val,xxx:xxx}.then(()=>{
//請(qǐng)求成功的回調(diào)函數(shù)
}).catch(()=>{
//失敗的回調(diào)函數(shù)
})
)案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
<script>
new Vue({
el:"#demo",
mounted(){
axios({
url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
method:"GET"
}).then((ok)=>{
console.log(ok);
}).catch((err)=>{
console.log(err);
})
}
})
</script>數(shù)據(jù)請(qǐng)求封裝
methods:{
axiosLink(url,method){
// 數(shù)據(jù)請(qǐng)求的封裝
return new Promise((resolve,reject)=>{
axios({
// es6中鍵值對(duì)一樣可以簡(jiǎn)寫
url,
method
}).then((ok)=>{
// 我們需要把成功的數(shù)據(jù)交給promise
resolve(ok)
}).catch((err)=>{
// 我們需要把失敗的數(shù)據(jù)交給promise
reject(err)
})
})
}舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="demodiv">
<button @click="fun()">點(diǎn)我請(qǐng)求1</button>
<button @click="funb()">點(diǎn)我請(qǐng)求2</button>
</div>
<script>
new Vue({
el: "#demodiv",
data:{
},
methods:{
axiosLink(url,method){
return new Promise((resolve,reject)=>{
axios({
url,
method,
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
},
fun() {
this.axiosLink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187", "GET").then((ok) => {
console.log(ok);
}).catch((err) => {
console.log(err)
})
},
funb() {
console.log(123);
this.axiosLink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","GET").then((ok)=>{
console.log(ok);
}).catch((err)=>{
console.log(err);
})
}
}
})
</script>
</body>
</html>數(shù)據(jù)展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="demo">
<button @click="fun()">點(diǎn)擊請(qǐng)求數(shù)據(jù)</button>
<img src="./1.gif" v-if="bool">
<ul>
<li v-for="(v,i) in arr">
{{v.commentTxt}}
</li>
</ul>
</div>
</body>
</html>
<script>
new Vue({
el:"#demo",
data:{
bool:false,
arr:[]
},
methods: {
axiosLink(url,method){
return new Promise((resolve,reject)=>{
axios({
url,
method
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
},
fun(){
this.bool=true
this.axiosLink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","GET").then((ok)=>{
console.log(ok.data.data.commentList);
this.arr=ok.data.data.commentList
this.bool=false
}).catch((err)=>{
console.log(err);
})
}
},
})
</script>到此這篇關(guān)于Vue前端后端的交互方式 axios的文章就介紹到這了,更多相關(guān)Vue交互方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
當(dāng)容器有滾動(dòng)條時(shí),有時(shí)需要將指定的內(nèi)容自動(dòng)滾動(dòng)到可視區(qū)域,怎么實(shí)現(xiàn)呢,下面小編給大家?guī)砹硕喾N方法實(shí)現(xiàn)Vue滾動(dòng)到指定位置,感興趣的朋友跟隨小編一起看看吧2023-08-08
Pinia 是2019年由vue.js官方成員重新設(shè)計(jì)的新一代狀態(tài)管理庫,類似Vuex,下面我們就來學(xué)習(xí)一下如何通過Pinia實(shí)現(xiàn)持久化存儲(chǔ)的相關(guān)知識(shí),感興趣的小伙伴可以了解下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue+canvas實(shí)現(xiàn)拼圖小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Vue使用高德地圖實(shí)現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch，為大家詳細(xì)講解計(jì)算屬性computed與$watch，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了關(guān)于Vue v-on指令的一些使用場(chǎng)景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場(chǎng)景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue.js表單控件實(shí)踐,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vue通過Blob對(duì)象實(shí)現(xiàn)導(dǎo)出Excel功能示例代碼
這篇文章主要介紹了Vue通過Blob對(duì)象實(shí)現(xiàn)導(dǎo)出Excel功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07