Axios发送Ajax请求

　　Axios发送Ajax请求

一：get和post请求：

//1.导入axios包，当然也可以用npm install axios,若是报错，可以使用crossorigin="anorymous"来消除警告
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
​
//1.获取出发事件的按钮：
const btns=document.querySelectorAll('button');
//配置baseURL：这样就不用再axios里面写URL地址，简化方法
axios.defaults.baseURL='http://127.0.0.1:8000';
​
//正式开始axios请求
btn.onclick=function(){//第一个参数时基础地址加在后面的后缀地址,第二个参数是请求体，第三个参数是其他配置，而第三个参数或者第二个参数后面可以使用箭头函数来对返回到的value进行操作，十分方便
    axios.get('/axios-server',{
      username:hanxiao,
      password:132456
    },{
        //url参数，如果配置过baseURL可以省略
        params:{
          id:100,
          vip:7
        },
        //请求头信息
        heaaders:{
            name:'asdlfohai',
            age:20
        }
    }).then(value=>{
       console.log(value) 
    });
}
//这里与jQuery的请求不同，这里使用then来获取响应的参数value，并对value进行操作

 

二：通用方式请求：

//跟jQuery一样，都有他们自己的通用请求方式,直接使用按钮来实现事件的操作：
​
axios.defaults.baseURL='http://127.0.0.1:8000';
btn.onclick=function(){
    axios({
        //url
        url:'/axios-server',
        //url参数
        params:{
            vip:10,
            level:30
        },
        //头参数：
        headers:{
            a:100,
            b:200
        },
        //请求体参数,发请求的
        data:{
            username:'hanxiao',
            password:13456
        }
    }).then(response=>{
        console.log(response);
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    })
}
//也是直接使用.then(请求到的参数)，使用箭头函数更加方便