初级前端的日常

---

axios学习

链接github网址 https://github.com/axios/axios#features

基于promise的http客户端，可以再浏览器和node.js环境中运行
在浏览器中，可以借助axios向服务端发送ajax请求；
在node.js中运行，向远端服务器发送http请求。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、axios的配置

使用 npm：

$ npm install axios

使用 yarn：

$ yarn add axios

使用 cdn：

<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

使用 bootcdn（国内）：

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.min.js"></script>

二、axios的基本使用

1.get请求–获取数据

代码如下（示例）：

btn[0].onclick = function(){
	//发送AJAX请求
	axios({
		//请求类型
		method: 'GET',
		//url
		url:'http://localhost:3000/posts/2',
	}).then(response = >{
		cosnsole.log(response);
	})
}

2.post请求–添加数据

代码如下（示例）：

btn[1].onclick = function(){
	//发送AJAX请求
	axios({
		//请求类型
		method: 'POST',
		//url
		url:'http://localhost:3000/posts', 
		//data是请求体，发送给服务器，最后数据会添加到json中
		data:{
			title:"今天天气不错，还挺风和日丽的",
			author:"张三"
		}
	}).then(response = >{
		cosnsole.log(response);
	})
}

3.put请求–更新数据

代码如下（示例）：

btn[2].onclick = function(){
	//发送AJAX请求
	axios({
		//请求类型
		method: 'PUT',
		//url
		url:'http://localhost:3000/posts'+'id', //id是要修改数据的id
		//data是请求体，发送给服务器，最后数据会添加到json中
		data:{
			title:"今天天气不错，还挺风和日丽的",
			author:"张三"
		}
	}).then(response = >{
		cosnsole.log(response);
	})
}

4.delete请求-删除数据

代码如下（示例）：

btn[3].onclick = function(){
	//发送AJAX请求
	axios({
		//请求类型
		method: 'delete',
		//url
		url:'http://localhost:3000/posts'+'id' //id是删除数据的id
	}).then(response = >{
		cosnsole.log(response);
	})
}

---

总结

还有其他方法，待更新…