Axios的安装与使用

最新推荐文章于 2024-10-14 15:40:16 发布

weixin_65437914

最新推荐文章于 2024-10-14 15:40:16 发布

阅读量968

点赞数 3

文章标签： vue.js 前端 ajax

本文链接：https://blog.csdn.net/weixin_65437914/article/details/123464420

版权

本文详细介绍了如何在Vue项目中安装和引入Axios库，并展示了Axios的GET、POST、PUT、PATCH和DELETE等请求方法的使用示例，帮助开发者更好地理解和应用Axios进行HTTP请求。

摘要由CSDN通过智能技术生成

安装与引入

npm安装 : npm install axios

在vue项目中的main.js中引用
	import axios from 'axios'
	Vue.prototype.$axios = axios
	
在组件使用axios
	<script>
		export default {
			mounted(){
				this.$axios.get('/goods.json').then(res=>{
					console.log(res.data);
				})
			}
		}
	</script>

Axios请求方式

	1 . axios可以请求的方法：
		get：获取数据，请求指定的信息，返回实体对象
		post：向指定资源提交数据（例如表单提交或文件上传）
		put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
		patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
		delete：请求服务器删除指定的数据
		
	2 . get请求
		this.$axios.get('/goods.json',{
			params: {
                id:1
            }
		}).then(res=>{
				console.log(res.data);
		},err=>{
				console.log(err);
		})
		
	3 . post请求
		this.$axios.post('/url',{
			id:1
		}).then(res=>{
			console.log(res.data);
		},err=>{
			console.log(err);
		})
		
	4.put请求
		this.$axios.put('/url',{
			id:1
		}).then(res=>{
			console.log(res.data);
		})
		
	5.patch请求
		this.$axios.patch('/url',{
			id:1
		}).then(res=>{
			console.log(res.data);
		})
		
	6.delete请求
		this.$axios.delete('/url',{
			params: {
				id:1
			}
		}).then(res=>{
			console.log(res.data);
		})