在vue中使用axios

axios的定义

一个专注于发起网络请求的库

基本使用

发起get请求

<script>
    //http://www.liulongbon.top:3006/api/getbooks
   const result = axios({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/getbooks',
        //URL中的查询参数
        params:{
            id:1
        }
    })

    result.then((books) => {
        console.log(books)
    }).catch((err) => {
        
    });
   
</script>

发起post请求

 //http://www.liulongbin.top:3006/api/getbooks
    document.querySelector('#btnPost').addEventListener('click',async function(){
        //如果调用某个方法的返回值是Promise实例，则前面可以添加await
        //await 只能用在async修饰的方法中
       const { data } = await axios({//解构赋值
            method:'POST',
            url:'http://www.liulongbin.top:3006/api/post',
            data:{
               name:'zs',
               age:'20' 
            }
        })
        console.log(data)
    })

1. 调用axios之后，使用async/await进行简化
2. 使用解构赋值,从axios封装的大对象中，把data属性解构出来
3. 把解构出来的data属性使用冒号进行重命名，一般重命名为{data:res}