五分钟上手axios

引言

1.axios是一个异步请求的技术
2.什么是异步请求？
基于XMLHttpRequest对象发起的请求都是异步请求
3.异步请求特点
请求之后页面不动，响应回来更新的是页面局部，多个请求之间互不影响，并发执行
4.与ajax区别
因为现在都是前后端分离的系统架构，主打的技术栈的Vue的全家桶系列（前端技术栈）,前后端分离的系统中的核心就是异步请求技术。开发中Vue取代了jq，所以不支持ajax，而原生的XMLHttpRequest发起的请求太麻烦，所以就诞生了axios。

Axios

1.中文使用说明：https://www.kancloud.cn/yunye/axios/234845
2.案例：
GET方式请求：

//引入axios相关的依赖
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios.get('/user?ID=12345')//请求发送的url和参数的传递
	  .then(function (response) {//响应回来触发的回调函数
	    console.log(response);
	  })
	  .catch(function (error) {//请求错误的时候的回调函数
	    console.log(error);
	  });
</script>

POST方式请求

//引入axios相关的依赖
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios.post('/user', {name:"zs",age:23})//参数的传递
	.then(function (response) {//响应回来触发的回调函数
	    console.log(response);
	})
	.catch(function (error) {//请求错误的时候的回调函数
	    console.log(error);
	});
</script>

在java开发中，注：
1.请求接口前需要添加@CrossOrigin注解允许跨域请求
2.axios在发送post请求时传递参数如果为对象类型，axios会自动将对象转为json格式的字符串使用application/json的请求头向后端传递参数。controller中接收到的值为null。
3.axios的post请求传递参数得到两种方式：
a)、使用字符串形式进行传递，如：“name=zs&age=23”。
b)、后端接口使用@RequestBody注解形式传递参数，如：在接口参数中添加@RequestBody Obj obj。将json字符串转为对象。json中的属性名必须与对象的属性名保持一致，且请求头必须为application/json。