目录语法数据请求封装前言： 大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有vue-resource axios fetch等方式进行数据集请求
前言：
大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有vue-resource axios 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>到此这篇关于Vue前端后端的交互方式 axios的文章就介绍到这了,更多相关Vue交互方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Vue前端后端的交互方式 axios
本文链接: https://www.lsjlt.com/news/147190.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0