Preface:
Everyone knows that as long as you interact with data, you must request the interface. There arevue-resource axios fetchDataset requests are made using other methods
- 1，vue-resource ：Officially produced, the update has been stopped after vue2x
- 2，axios ：Third-party data request database
- 3, fetch：yes
JavaScriptA data request method issued by the latest standard
Today I will tell you what we are most familiar with and most commonly usedaxios
Install:
npm install --save axios
grammar
The easiest way to write
get request:
("Request address?kty=val&key=val").then(()=>{
//Successful callback function}).catch(()=>{
// Failed callback function})Post Request
General writing
("Request Address",{Sentkey:Sentval,xxx:xxx}.then(()=>{
//A callback function that requested successfully}).catch(()=>{
// Failed callback function})
)Case:
<!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/"></script>
<script src="./node_modules/axios/dist/"></script>
</head>
<body>
<div >
</div>
</body>
</html>
<script>
new Vue({
el:"#demo",
mounted(){
axios({
url:":8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
method:"GET"
}).then((ok)=>{
(ok);
}).catch((err)=>{
(err);
})
}
})
</script>Data request encapsulation
methods:{
axiosLink(url,method){
// Encapsulation of data requestsreturn new Promise((resolve,reject)=>{
axios({
// The key-value pairs in es6 can be abbreviatedurl,
method
}).then((ok)=>{
// We need to hand over the successful data to promiseresolve(ok)
}).catch((err)=>{
// We need to hand over the failed data to promisereject(err)
})
})
}For example:
<!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/"></script>
<script src="./node_modules/axios/dist/"></script>
</head>
<body>
<div >
<button @click="fun()">Click me to request1</button>
<button @click="funb()">Click me to request2</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() {
(":8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187", "GET").then((ok) => {
(ok);
}).catch((err) => {
(err)
})
},
funb() {
(123);
(":8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","GET").then((ok)=>{
(ok);
}).catch((err)=>{
(err);
})
}
}
})
</script>
</body>
</html>Data display:
<!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/"></script>
<script src="./node_modules/axios/dist/"></script>
</head>
<body>
<div >
<button @click="fun()">Click to request data</button>
<img src="./" v-if="bool">
<ul>
<li v-for="(v,i) in arr">
{{}}
</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(){
=true
(":8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","GET").then((ok)=>{
();
=
=false
}).catch((err)=>{
(err);
})
}
},
})
</script>This is all about this article about the interaction methods of Vue front-end and back-end axios. For more related content on Vue interaction methods, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!