# 1、什么是axios
# 2.axios的基本使用
语法：
** axios.get('url', { params: { /参数/ } }).then(callback)**
2.1 axios 发起 get 请求的语法
<button id="btn1">发起GET请求</button>
查看代码
//1、给按钮绑定事件
document.querySelector('#btn1').addEventListener('click',function(){
// axios.get('url', { params: { /*参数*/ } }).then(callback)
//请求的url地址
var url = 'http://www.liulongbin.top:3006/api/get';
//定义传送给params的 参数
var paramsobj = { name : 'yyds' , age : 24};
//通过.then发送出去数据回调
axios.get(url,{params:paramsobj}).then(function(res){
// 直接回调res返回的数据会很多 //控制台中查看数据
// console.log(res)
//// res.data 才是服务器真实返回想要的数据
const result = res.data;
console.log(result);
})
})
2.2 axios 发起 POST 请求的语法
<button id="btn2">发起POST请求</button>
点击查看代码
document.querySelector('#btn2').addEventListener('click',function(){
//axios.POST('url', { params: { /*参数*/ } }).then(callback)
//定义url地址
const url = 'http://www.liulongbin.top:3006/api/post';
//定义发送的参数
const dataobj = { name : 'yyds2' , age : 25 }
//发起一个post 请求， 然后通过.then()回调函数
axios.post(url,{params:dataobj}).then(function(res){
console.log(res.data)
})
})
2.3 直接使用axios 发起 GET 请求的语法
<button id="btn3">直接使用axios发起GET请求</button>
点击查看代码
//直接使用axios直接发起GET请求 get通过params接受参数 post通过data发送数据
//axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：
document.querySelector('#btn3').addEventListener('click',function(){
axios({
methods:'GET',
url:'http://www.liulongbin.top:3006/api/get',
//get通过params
params:{ name:'yyds' , age : 26 },
})//通过.then()回调函数
.then(function(res){
console.log(res.data)
})
})
2.4直接使用axios 发起 POST 请求的语法
<button id="btn4">直接使用axios发起POST请求</button>
点击查看代码
//直接使用axios直接发起Post请求 get通过params接受参数 post通过data发送数据
//axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：
document.querySelector('#btn4').addEventListener('click',function(){
axios({
method:'POST',
url:'http://www.liulongbin.top:3006/api/post',
data:{ name : 'yyds' , age : 27},
})
.then(function(res){
console.log(res.data)
})
})