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(請求到的參數)，使用箭頭函數更加方便