Vue前端后端的交互方式 axios
时间：2022-07-27 11:17:13|栏目：vue|点击： 次
前言：
大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有vue-resource axios fetch等方式进行数据集请求
- 1，vue-resource ：官方出品，在vue2x之后已经停止更新
- 2，axios ：第三方数据请求库
- 3, fetch：是
JavaScript最新标准出的一个数据请求方式
今天跟大家谈谈我们最熟悉,也是最常用的axios
安装：
npm install --save axios
语法
最简单的写法
get请求：
axios.get("请求地址?kty=val&key=val").then(()=>{
//成功的回调函数
}).catch(()=>{
//失败的回调函数
})
post请求
一般写法
axios.post("请求地址",{发送的key:发送的val,xxx:xxx}.then(()=>{
//请求成功的回调函数
}).catch(()=>{
//失败的回调函数
})
)
案例：
<!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>
数据请求封装
methods:{
axiosLink(url,method){
// 数据请求的封装
return new Promise((resolve,reject)=>{
axios({
// es6中键值对一样可以简写
url,
method
}).then((ok)=>{
// 我们需要把成功的数据交给promise
resolve(ok)
}).catch((err)=>{
// 我们需要把失败的数据交给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()">点我请求1</button>
<button @click="funb()">点我请求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>
数据展示：
<!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()">点击请求数据</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>
