• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

在vue中使用axios

互联网 diligentman 2小时前 2次浏览

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}

程序员灯塔
转载请注明原文链接:在vue中使用axios
喜欢 (0)