Vue前端后端的交互方式 axios
短信预约 -IT技能 免费直播动态提醒
前言：
大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有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 class="lazy" data-src="./node_modules/vue/dist/vue.min.js"></script>
<script class="lazy" data-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 class="lazy" data-src="./node_modules/vue/dist/vue.min.js"></script>
<script class="lazy" data-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 class="lazy" data-src="./node_modules/vue/dist/vue.min.js"></script>
<script class="lazy" data-src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="demo">
<button @click="fun()">点击请求数据</button>
<img class="lazy" data-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>到此这篇关于Vue前端后端的交互方式 axios的文章就介绍到这了,更多相关Vue交互方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
