axios介绍及与后台交互的坑

最近在开发项目的过程中有用到vue.js,在于后台交互的时候会用到axios。在初次使用axios的时候前端封装的数据在controller总是获取不到，在这里总结一下原因及解决办法。

介绍下axios

axios:一个基于primise用于浏览器和Node.js的Http客户端。

特点：支持浏览器和node.js

            支持promise

            能拦截请求和响应

            能转换请求和响应数据

            能取消请求

            自动转换JSON数据

             浏览器支持防止CSRF（跨站请求伪造）

promise:promise是作为异步编程的一种解决方案，比传统的回调函数和事件要合理。promise不会去传递一个回调函数给目标函数，而是让目标函数返回一个promise，来执行对应的事件。

我们采用回调模式实现异步编程时，容易产生回调地狱，即在一个回调函数中嵌套多个回调函数，使得代码难以理解和调试.

基本用法：

 

 axios与ajax请求：

axios默认请求头：Content-Type: application/json。

ajax默认请求头：Content-Type: application/x-www-form-urlencoded

就是因为这个原因，以前ajax用习惯了，导致我的controller一直接受不到数据

请看我刚开始错误代码：

前台页面请求：

 

可以看到我的请求数据格式是json,后台接受的为0（没有数据默认为0，实际是 1和5），controller中没有获取到数据。

前端解决方案1：

用URLSearchParams来传递参数，注意的是不支持所有的浏览器

 

解决方案2：

引入QS

 

 

后端解决方案：

1加注解@RequestBody：用来处理请求体中的json数据。这个就不贴图了