![[前端开发] MUI框架详解-全面讲解MUI框架使用](https://www.bloglab.cn/wp-content/uploads/thumb/2018/12/fill_w372_h231_g0_mark_80e5f34e03334950b3a4cb73bf4262dd.webp)
![[MySQL] MySQL面试指南](https://www.bloglab.cn/wp-content/uploads/2018/12/1532f1414c3e23.webp)
![[Web安全] 黑客是怎样炼成的视频教程](https://www.bloglab.cn/wp-content/uploads/thumb/2018/12/fill_w372_h231_g0_mark_113cb06a91a3f5.webp)
释放双眼，带上耳机，听听看~！
axios也是一种ajax请求。
ajax请求
vue全家桶
- vue-cli脚手架
- axios
- router
- vuex
- element
为什么用axios？
-
-
jquery相比ajax过于宠大，我们有时候公公只需要一个网络接口请求功能。
-
axios之get请求
//get请求
axios.get('请求接口路径',
//params就是要传的参数，也可直接串到路径上
{params: {
ID: 12345
}}
)
.then(response=>{console.log("成功的处理");})
.catch(error=>{console.log("错误的处理");});Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="clickEvent">点我获取数据</button>
<ul>
<li v-for="(item, index) in axiosRes" :key="index">{{item}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<!-- 要使用axios，首先要要导包进来 -->
<script src="./axios.js"></script>
<script>
new Vue({
el: "#app",
data: {
axiosRes: ""
},
methods: {
clickEvent() {
// axios.get(url).then(//正常返回).catch(//错误返回) 参数直接写url上
//axios.get(url,{params:{//参数}}).then(//正常返回).catch(//错误返回)
//箭头函数用法
// axios.get('https://autumnfish.cn/api/joke/list?num=10')
// .then(res => {
// this.axiosRes = res.data.jokes
// })
// .catch((error) => {
// console.log(error)
// });
// 传统用法
let _this = this
axios.get('https://autumnfish.cn/api/joke/list?num=10')
.then(function (res) {
_this.axiosRes = res.data.jokes
})
.catch((error) => {
console.log(error)
});
}
}
})
</script>
</body>
</html>
//post请求
axios.post('请求接口路径',
{ //接口请求参数
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response=>{console.log("成功的处理");})
.catch(error=>{console.log("错误的处理");});Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<button @click="poseEvent">调用post</button>
<div>
{{msg}}
</div>
</div>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script>
new Vue({
el: "#app",
data: {
username: "",
msg: ""
},
methods: {
poseEvent() {
// axios.post(url，{//需要传递的参数}).then((res)=>{//成功返回}).catch(err=>{//错误返回})
axios.post("https://autumnfish.cn/api/user/reg", {
username: this.username
}).then(res => {
this.msg = res
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
})
</script>
</body>
</html>
内容投诉
