在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}

最后

以上就是忧心小蜜蜂为你收集整理的在vue中使用axios的全部内容，希望文章能够帮你解决在vue中使用axios所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。