Axios是专注于网络数据请求的库。 相比于原生的Ajax的XMLHttpRequest对象，axios简单易用； 相比于jQuery，axios更是轻量化，只专注于网络数据请求； 特别是直接使用axios发送请求在vue中常常看到，是学习的重点。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/axios.min.js">
</script>
</head>
<body>
<button id="btn1">axios发起GET请求</button>
<button id="btn2">axios发起POST请求</button>
<button id="btn3">直接使用axios请求 参数为GET</button>
<button id="btn4">直接使用axios请求 参数为POST</button>
<script>
document.querySelector('#btn1').addEventListener('click',function () {
var url = 'http://liulongbin.top:3006/api/get';
var paramsObj = {name : 'zs' ,age :20};
axios.get(url,{params:paramsObj}).then(function (res) {
//res.data是服务器返回的数据
var result = res.data;
//res中的属性只有data才是服务器返回的数据，其他的是axios封装的
console.log(res.data);
})
})
document.querySelector('#btn2').addEventListener('click',function () {
// 要提交到服务器的数据
var dataObj = {location: '北京',address:'顺义'}
// 调用axios.post()发起post请求
axios.post('http://liulongbin.top:3006/api/post',dataObj).then(function (res) {
// res.data是服务器返回的数据
var result = res.data;
console.log(result);
})
})
document.querySelector('#btn3').addEventListener('click',function () {
axios({
//大小写无所谓
method: 'GET',
url: 'http://liulongbin.top:3006/api/get',
params: {
// get参数通过params属性提供
name: 'ls',
age: 51
}
}).then(function (res){
console.log(res.data);
})
})
document.querySelector('#btn4').addEventListener('click',function () {
axios({
method:'post',
url:'http://liulongbin.top:3006/api/post',
data:{
// post数据通过data属性提供
bookname:'lzx学习axios一天了',
price: 666
}
}).then(function (res) {
console.log(res.data);
})
})
</script>
</body>
